Semantic-UI Content Headers Type

Last Updated : 24 Mar, 2022

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website.

Semantic UI Headers are used to provide a short summary of the content. We can use these headers with text, icons, etc. Semantic UI Content Headers are used to give importance to the sections. There are many headers type such as huge, large, medium, small, tiny, etc.

In this article, we will discuss Content Headers Type in Semantic-UI.

Semantic UI Content Headers Type Classes:

huge: This class is used to create the huge size header.
large: This class is used to create the large size header.
medium: This class is used to create medium size header.
small: This class is used to create a small size header.
tiny: This class is used to create the tiny size header.

Syntax:

<div class="ui Content-Headers-Type-Class header">
  ....
</div>

Example 1: The following code demonstrates the Semantic UI Content Headers Type using huge and large classes.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <title> Semantic-UI Content Headers Type </title> 
  <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
  <div class="ui container center aligned"> 
    <h2 class="ui header green"> GeeksforGeeks </h2> 
    <h3> Semantic-UI Content Headers Type </h3> 
    
    <div class="ui segment"> 
      <div class="ui huge header"> 
        GeeksforGeeks Huge header 
      </div> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
      <div class="ui large header"> 
        GeeksforGeeks Large header 
      </div> 
      <p> 
        Portal for geeks. 
      </p> 
    </div> 
  </div> 
</body> 
</html>

Output:

Example 2: The following code demonstrates the Semantic UI Content Headers Type using the medium, small, and tiny classes.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <title> Semantic-UI Content Headers Type </title> 
  <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
  <div class="ui container center aligned"> 
    <h2 class="ui header green"> GeeksforGeeks </h2> 
    <h3> Semantic-UI Content Headers Type </h3> 
    
    <div class="ui segment"> 
      <div class="ui medium header"> 
        GeeksforGeeks Medium header 
      </div> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
      <div class="ui small header"> 
        GeeksforGeeks Small header 
      </div> 
      <p> 
        Portal for geeks. 
      </p> 
  
      <div class="ui tiny header"> 
        GeeksforGeeks Tiny header 
      </div> 
      <p> 
        Computer Science portal. 
      </p> 
    </div> 
  </div> 
</body> 
</html>