Open In App

Semantic-UI Page Headers Type

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Semantic-UI Page Headers Type

Reference: https://semantic-ui.com/elements/header.html#page-headers



Last Updated : 24 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads