Semantic-UI Header Colored Variations

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 Colored variant of the header.

Semantic-UI Header Variations Colored Variant Class:

red: This class is used to set the color red.
orange: This class is used to set the color orange.
yellow: This class is used to set the color yellow.
olive: This class is used to set the color olive.
green: This class is used to set the color green.
teal: This class is used to set the color teal.
blue: This class is used to set the color blue.
purple: This class is used to set the color purple.
violet: This class is used to set the color violet.
pink: This class is used to set the color pink.
brown: This class is used to set the color brown.
grey: This class is used to set the color grey.

Syntax:

<element class="ui Colored-Variant-Class header">
...
</element >

Below example illustrate the Semantic-UI Header Variations Colored Variant:

Example:

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 Colored Variant 
         </strong> 
      </center> 
      <br> 
      <div class="ui"> 
         <p> 
            <strong class="ui red header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui orange header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui yellow header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui olive header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui green header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui teal header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
      </div> 
   </body> 
</html>

Output:

Semantic-UI Header Colored Variations

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 Colored Variant 
         </strong> 
      </center> 
      <br> 
      <div class="ui"> 
         <p> 
            <strong class="ui blue header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui purple header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui violet header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui pink header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui brown header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
         <p> 
            <strong class="ui grey header"> 
            Geeksforgeeks: 
            </strong> 
            A Computer Science Portal for Geeks 
         </p> 
  
      </div> 
   </body> 
</html>