Open In App

Semantic-UI Header Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI offers many components for users to design their interface. It offers us different types of headers, different types of content holding headers, states of header in different variations.

In this article, we will learn about the Semantic UI Header Variations. Header variations have many varieties of headers, like dividing, block, attached, floated, text-alignment, colored and inverted headers. These can be used to modify the behavior of the header according to the requirement.

Semantic UI Header Variations classes:

  • dividing: This variation of the header is used to divide itself from the content below it.
  • block: This variation of the header is used to format to appear inside a content block
  • attached: This variation of the header is used to attach to other content, like a segment.
  • floated: This variation of the header is used to the left or right of other content.
  • text-alignment: This variation of the header is used to text aligned to one side.
  • colored: This variation of the header is used to format with different colours.
  • inverted: This variation of the header is used to colours inverted for contrast.

Syntax:

<div class="ui Header-Variations header">
    ...
</div >

The below examples illustrate the Semantic UI Header Variations:

Example 1:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
          rel="stylesheet" />
    <style>
        .container {
            margin-left: 15px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <strong>Semantic UI Header Variations</strong>
        <br><br>
    </center>
    <div class="container">
        <strong>Dividing Header:</strong>
        <div class="ui dividing header">
            Geeksforgeeks
        </div>
        <strong>Block Header:</strong>
        <div class="ui block header">
            Geeksforgeeks
        </div>
        <strong>Attached Header:</strong>
        <div class="ui top attached header">
            Geeksforgeeks
        </div>
        <div class="ui attached segment">
             
 
 
 
 
<p>A Computer Science Portal for Geeks</p>
 
 
 
 
 
        </div>
        <div class="ui attached header">
            Keep yourself Updated
        </div>
        <div class="ui attached segment">
             
 
 
 
 
<p>
                Web-Development is an art using
                CSS with the help of pre-processors
                are not cup of tea that's why developers
                really on frameworks like Semantic-UI.
            </p>
 
 
 
 
 
 
        </div>
        <div class="ui bottom attached header">
            Geeks Class
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Header Variations

Semantic-UI Header Variations

Example 2:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
          rel="stylesheet" />
    <style>
        .container {
            margin-left: 15px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <strong>Semantic UI Header Variations</strong>
        <br><br>
    </center>
    <div class="container">
        <strong>Floated Header:</strong>
        <div class="ui clearing segment">
            <h4 class="ui right floated header">
                Next Class
            </h4>
            <h4 class="ui left floated header">
                Previous Class
            </h4>
        </div>
        <strong>Text-alignment Header:</strong>
        <div class="ui segment">
            <h4 class="ui right aligned header">
                GeeksforGeeks
            </h4>
            <h4 class="ui left aligned header">
                GeeksforGeeks
            </h4>
            <h4 class="ui justified header">
                GeeksforGeeks: A Computer Science portal
            </h4>
            <h4 class="ui center aligned header">
                Geeksforgeeks
            </h4>
        </div>
        <strong>Colored Header:</strong>
         
        <h4 class="ui green header">Geeksforgeeks:</h4>
        <span class="ui red header">A</span>
        <span class="ui orange header">Computer</span>
        <span class="ui yellow header">Science</span>
        <span class="ui olive header">Portal</span>
        <span class="ui purple header">for</span>
        <span class="ui teal header">Geeks</span>
 
        <strong>Inverted Header:</strong>
        <div class="ui inverted segment">
            <h4 class="ui green header">Geeksforgeeks:</h4>
            <span class="ui red header">A</span>
            <span class="ui orange header">Computer</span>
            <span class="ui yellow header">Science</span>
            <span class="ui olive header">Portal</span>
            <span class="ui purple header">for</span>
            <span class="ui teal header">Geeks</span>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Header Variations

Semantic-UI Header Variations

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



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