Semantic-UI Header Variations Inverted Variant

Last Updated : 21 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 inverted variant of the header.

Semantic-UI Header Variations Inverted Variant Class:

inverted: This class is used to create colors inverted for contrast.

Syntax:

<div class="ui inverted segment">
    <element class="ui inverted header">
          ...
    </element >
</div>

Example 1: The below example illustrates the Semantic-UI Header Variations Inverted 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" /> 
   </head> 
   <body> 
      <center> 
         <h1 class="ui header green"> 
            GeeksforGeeks 
         </h1> 
         <strong> 
            Semantic-UI Header Variations Inverted Variant 
         </strong> 
      </center> 
      <br> 
      <div class="ui inverted segment"> 
         <p> 
            <strong class="ui red inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui orange inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui yellow inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui olive inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui green inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui teal inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
      </div> 
   </body> 
</html>

Output:

Semantic-UI Header Variations Inverted Variant

Example 2:

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" /> 
   </head> 
   <body> 
      <center> 
         <h1 class="ui header green"> 
            GeeksforGeeks 
         </h1> 
         <strong> 
            Semantic-UI Header Variations Inverted Variant 
         </strong> 
      </center> 
      <br> 
      <div class="ui inverted segment"> 
         <p> 
            <strong class="ui blue inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui purple inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui violet inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui pink inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui brown inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui grey inverted header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
      </div> 
   </body> 
</html>