ReactJS Semantic UI header element
Last Updated :
20 Jun, 2021
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.
In this article we will know how to use the header element in ReactJS Semantic UI. The header element is used to make a header.
Properties:
- Page Headers: It is used to set the hierarchy of the section of the page.
- Content Headers: It is used to specify the importance of a particular section.
- Icon Headers: It is used to give emphasis on a particular icon.
- Subheaders: It is used for smaller content.
States:
- Disabled: This state is used disable the header.
Syntax:
<header size='size'>Header</Header>
Creating React Application And Installing Module:
Project Structure: It will look like the following.
Example 1: In this example, we will be going to use basic header element by using ReactJS Semantic UI header element.
App.js
import React from 'react'
import {Header} from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
<br></br>
const Btt = () =>
<div>
<Header as='h1'>GeeksforGeeks</Header>
<Header as='h2'>GeeksforGeeks</Header>
<Header as='h3'>GeeksforGeeks</Header>
<Header as='h4'>GeeksforGeeks</Header>
<Header as='h5'>GeeksforGeeks</Header>
<Header as='h6'>GeeksforGeeks</Header>
</div>
export default Btt
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Output:
Example 2: In this example, we are going to use the header element with the size attribute and disabled state by using ReactJS Semantic UI header element.
App.js
import React from 'react'
import {Header} from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
<br></br>
const Btt = () =>
<div>
<Header size='huge'>GeeksforGeeks</Header>
<Header size='large'>GeeksforGeeks</Header>
<Header size='medium'>GeeksforGeeks</Header>
<Header size='small'>GeeksforGeeks</Header>
<Header size='tiny'>GeeksforGeeks</Header>
</div>
export default Btt
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Output:
Reference: https://react.semantic-ui.com/elements/header
Similar Reads
ReactJS Semantic UI Loader Element Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use the Loader element in Rea
2 min read
ReactJS Semantic UI Label Element Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use label elements in ReactJS
3 min read
ReactJS Semantic UI image Element Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article, we will know how to use image elements in ReactJ
2 min read
ReactJS Semantic UI Placeholder Element Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use Placeholder element in Re
2 min read
ReactJS Semantic UI flag Element Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article, we will know how to use flag element in ReactJS
2 min read
ReactJS Semantic UI Rail Element Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use rail element in ReactJS S
2 min read