Semantic-UI Sub Headers Type

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. The sub headers add de-emphasized content to the website than the main textual representation. In this article let us see about the Sub Headers Types classes along with examples.

Semantic UI Icon Headers Type classes:

sub headers: In this class, headers may be formatted to label smaller or de-emphasized content.

Syntax:

<div class="ui sub header">
    ...
</div>

Example 1: Below example code demonstrates the Sub Headers Type using some text.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Icon sub Headers Type</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui header green"> 
            w3wiki 
        </h1> 
  
        <h3> 
            Semantic-UI Icon sub Headers Type 
        </h3> 
  
        <h2 class="ui sub header"> 
            w3wiki 
        </h2> 
  
        <span> 
            It is a computer Science portal 
        </span> 
    </center> 
  
    <script crossorigin="anonymous" 
            src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="> 
        </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI sub Headers Type

Example 2: Below example code demonstrates the Sub Headers Type using an image.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Icon sub Headers Type</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui header green"> 
            w3wiki 
        </h1> 
  
        <h3> 
            Semantic-UI Icon sub Headers Type 
        </h3> 
  
        <div class="ui horizontal list"> 
            <div class="item"> 
                <img class="ui mini circular image"
                    src= 
"https://media.w3wiki.net/wp-content/uploads/20220306131409/one2optimizedmin-300x184.png"> 
                <div class="content"> 
                    <div class="ui sub header">Sandeep Jain</div> 
                    Founder w3wiki 
                </div> 
            </div> 
  
            <div class="item"> 
                <img class="ui mini circular image"
                    src= 
"https://media.w3wiki.net/wp-content/uploads/20220306131521/two.png"> 
                <div class="content"> 
                    <div class="ui sub header">Pranay Bansal</div> 
                    Course Instructor w3wiki 
                </div> 
            </div> 
        </div> 
    </center> 
  
    <script crossorigin="anonymous" 
            src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="> 
        </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI sub Headers Type

Reference link: https://semantic-ui.com/elements/header.html#sub-headers

HTML

HTML

Contact Us