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.
Semantic UI Header Types:
- Page Headers: In this class, headers may be oriented to give the hierarchy of a section in the context of the page
- Content Headers: In this class, headers may be oriented to give the importance of a section in the context of the content that surrounds it.
- Icon Headers: In this class, a header can be formatted to emphasize an icon.
- Sub Headers: In this class, headers may be formatted to label smaller or de-emphasized content.
Syntax:
<div class="ui Header-Types header">
....
</div>
Example 1: This example demonstrates the Page Headers Semantic UI Header Types class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<center><br>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>Semantic UI Header Types</h3>
<hr>
<div class="ui container">
<h1 class="ui header">First header</h1>
<h2 class="ui header">Second header</h2>
<h3 class="ui header">Third header</h3>
<h4 class="ui header">Fourth header</h4>
<h5 class="ui header">Fifth header</h5>
</div>
<hr>
</center>
</body>
</html>
|
Output:
Semantic-UI Header Types
Example 2: This example demonstrates the Content Headers Semantic UI Header Types class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<center><br>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>Semantic UI Header Types - Content Headers</h3>
<hr>
<div class="ui size vertical segment">
<h1 class="ui huge header">First header</h1>
<h2 class="ui large header">Second header</h2>
<h3 class="ui medium header">Third header</h3>
<h4 class="ui small header">Fourth header</h4>
<h5 class="ui tiny header">Fifth header</h5>
</div>
<hr>
</center>
</body>
</html>
|
Output:
Semantic-UI Header Types
Example 3: This example demonstrates the Icon Headers Semantic UI Header Types class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<center><br>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>Semantic UI Header Types - Icon Headers</h3>
<hr>
<div class="ui container">
<h3 class="ui center aligned icon header">
<i class="circular users icon"></i>
Users
</h3>
<h3 class="ui center aligned icon header">
<i class="circular chess icon"></i>
Chess
</h3>
</div>
<hr>
</center>
</body>
</html>
|
Output:
Semantic-UI Header Types
Example 4: This example demonstrates the Sub Headers Semantic UI Header Types class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<center><br>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>Semantic UI Header Types - Sub Headers</h3>
<hr>
<div class="ui horizontal list">
<div class="item">
<i class="circular users icon"></i>
<div class="content">
<div class="ui sub header">Users</div>
Login/SignUp
</div>
</div>
<div class="item">
<i class="circular chess icon"></i>
<div class="content">
<div class="ui sub header">Chess</div>
Play
</div>
</div>
</div>
<hr>
</center>
</body>
</html>
|
Output:
Semantic-UI Header Types
Reference Link: https://semantic-ui.com/elements/header.html#types