Semantic-UI Header Colored Variations

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"> 
            w3wiki 
         </h1> 
         <strong> 
         Semantic-UI Header Variations Colored Variant 
         </strong> 
      </center> 
      <br> 
      <div class="ui"> 
         <p> 
            <strong class="ui red header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui orange header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui yellow header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui olive header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui green header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui teal header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </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"> 
            w3wiki 
         </h1> 
         <strong> 
         Semantic-UI Header Variations Colored Variant 
         </strong> 
      </center> 
      <br> 
      <div class="ui"> 
         <p> 
            <strong class="ui blue header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui purple header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui violet header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui pink header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui brown header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
         <p> 
            <strong class="ui grey header"> 
            w3wiki: 
            </strong> 
            A Computer Science Portal for Beginner 
         </p> 
  
      </div> 
   </body> 
</html>

Output:

Semantic-UI Header Colored Variations

Reference: https://semantic-ui.com/elements/header.html#colored

HTML

HTML

Contact Us