Semantic-UI Header Block 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 Block variant of the header.

Semantic-UI Header Variations Divider Block Variant Class:

block: This class is used so the header can be formatted to appear inside a content block.

Syntax:

<element class="ui block header">
  ...
</element >

Example: Below example illustrate the Semantic-UI Header Variations Block 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 Block 
    </strong> 
    <br><br> 
  </center> 
  
  <div> 
    <h1 class="ui block header"> 
      Geeksforgeeks 
    </h1> 
      
    <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> 
</body> 
  
</html>