Open In App

Semantic-UI Header States

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI offers many components for users to design their interface. The Header component 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 States. These states are used to define the state of any dedication header. The default value of the state is active.

Semantic UI Header States class:

  • disabled: This class is used to make the dedicated header disabled or inactive.

Note: There is only one state in the header so the value will be disabled.

Syntax:

<div class="ui Header-Statesheader">
 ....
</div>

The below example illustrates the Semantic-UI Header States:

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <strong>Semantic UI Header States</strong>
        <br><br>
    </center>
    <div class="container" 
         style="margin-left: 15px;">
        <strong>Disabled Header:</strong>
        <div class="ui disabled header">
            GeeksforGeeks: A Computer Science
            Portal for Geeks.
        </div>
        <strong>Enabled Header(Default):</strong>
        <div class="ui header">
            GeeksforGeeks: A Computer Science
            Portal for Geeks.
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Header States

Semantic-UI Header States



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads