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.
Semantic-UI header provides a short summary of content and it offers us different variations of the header, like Dividing, Block, Attached, Floating, Text alignment, colored, and Inverted variants. Here in this article, we will know about the Attached variant of the header.
Semantic-UI Header Variations Divider Attached Variant Class:
- attached: This class is used so that the header can be attached to other content, like a segment.
- top attached: This class is used so that the header can be attached on top of the other content.
- bottom attached: This class is used so that the header can be attached on bottom of the other content.
Syntax:
<element class="ui block header">
...
</element>Example 1:
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet"/>
<style>
div {
margin-left: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Header Variations Attached</strong>
<br><br>
</center>
<div>
<h3 class="ui attached header">
Geeksforgeeks<sub>Attached</sub>
</h3>
<div class="ui attached segment">
<p>
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses,
Frequent Coding Competitions, Webinars
by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Header Variations Divider Attached Variant
Example 2: Below example illustrate the Semantic-UI Header Variations Attached Variant
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet"/>
<style>
div {
margin-left: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Header Variations Attached</strong>
<br><br>
</center>
<div>
<h3 class="ui top attached header">
Geeksforgeeks<sub>Top Attached</sub>
</h3>
<div class="ui attached segment">
<p>
With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started
a dream, GeeksforGeeks. Whether programming excites
you or you feel stifled, wondering how to prepare
for interview questions or how to ace data structures
and algorithms, GeeksforGeeks is a one-stop solution.
</p>
</div>
<h3 class="ui attached header">
Geeksforgeeks<sub>Attached</sub>
</h3>
<div class="ui attached segment">
<p>
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses,
Frequent Coding Competitions, Webinars
by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
</div>
<h3 class="ui bottom attached header">
Geeksforgeeks<sub>Bottom Attached</sub>
</h3>
</div>
</body>
</html>
|
Output:
Semantic-UI Header Variations Divider Attached Variant
Reference: https://semantic-ui.com/elements/header.html#attached