Semantic-UI Page Headers Type
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI has really cool headers that can be used with text, Icons and many more. A header provides a short summary of the content.
We will create a UI to show the different types of Headers. After creating this basic template you can work with different components of Semantic UI. Page Headers Type is one of the Semantic-UI header types. Using this class, headers may be oriented to give the hierarchy of a section in the context of the page. To create page header add class ui header to heading(h1, h2, h3, h4, h5, h6) element.
Semantic-UI Page Headers Type Class:
- header: This class is used to make a page header. It gives the hierarchy of a section in the context of the page.
Syntax:
<heading_element class="ui header">
....
</heading_element >
Example 1: This example demonstrates the Page Headers Semantic UI Header Types class with h1, h3 heading elements.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< center >< br >
< h1 class = "ui green header" >
GeeksforGeeks
</ h1 >
< h3 >Semantic-UI Page Headers Type</ h3 >
< br >
< hr >
< div class = "ui container" >
< br >
< h1 class = "ui header" >
Page Headers Type with < h1 > heading
</ h1 >
< br >
< h3 class = "ui header" >
Page Headers Type with < h3 > heading
</ h3 >
< br >
</ div >
< hr >
</ center >
</ body >
</ html >
|
Output:
Semantic-UI Page Headers Type
Example 2: This example demonstrates the Page Headers Semantic UI Header Types class with h2, h4, h5 heading elements.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< center >< br >
< h1 class = "ui green header" >
GeeksforGeeks
</ h1 >
< h3 >Semantic-UI Page Headers Type</ h3 >
< br >
< hr >
< div class = "ui container" >
< br >
< h2 class = "ui header" >
Page Headers Type with < h2 > heading
</ h2 >
< h4 class = "ui header" >
Page Headers Type with < h4 > heading
</ h4 >
< h5 class = "ui header" >
Page Headers Type with < h5 > heading
</ h5 >
< br >
</ div >
< hr >
</ center >
</ body >
</ html >
|
Output:
Semantic-UI Page Headers Type
Reference: https://semantic-ui.com/elements/header.html#page-headers
Last Updated :
24 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...