Semantic-UI Header Attached Variations

Last Updated : 23 Feb, 2022

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:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic UI</title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic UI</title> 
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    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>