Semantic-UI | Header
Last Updated :
11 May, 2020
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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 they can be used with text, Icons and many more. Let’s see some example of Semantic-UI Headers.
Example 1: In this example, we will see the different kinds of page headers.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<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>
<h6 class="ui header">Sixth header</h6>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will see the icon as a header.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h1>Icon Header</h1>
<h2 class="ui center aligned icon header">
<i class="circular users icon"></i>
Users
</h2>
<h2 class="ui center aligned icon header">
<i class="circular chess icon"></i>
Chess
</h2>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 3: In this example, we will see header with description
.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui header">
GeeksforGeeks
<div class="sub header">
A Computer Science portal for Geeks.
</div>
</h2>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 4: In this example, we will see header with image.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2>Image as Header</h2>
<div class="ui compact menu">
<h2 class="ui header">
<img class="ui image" src=
<div class="content">
geeksforgeeks
</div>
</h2>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 5: In this example, we will see header with icon.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2>Header with Icon</h2>
<h2 class="ui header">
<i class="users icon"></i>
<div class="content">
Friend List
<div class="sub header">
Only Private ones.
</div>
</div>
</h2>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 6: In this example, we will see block heading.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2>Block Header</h2>
<h3 class="ui block header">
Geeksforgeeks
</h3>
Learn anything related to computer Science.
</div>
<script src=
</script>
</body>
</html>
|
Output:
Example 7: In this example, we will see floating header.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2>Floating Header</h2>
<div class="ui clearing segment">
<h3 class="ui right floated header">
Previous
</h3>
<h3 class="ui left floated header">
Next
</h3>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Note: You can also inverted header by adding class inverted to your segment and header. You can directly run these examples by clicking on Run on IDE.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...