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