Foundation CSS Label Coloring

Last Updated : 09 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Label Coloring Classes in Foundation CSS.

In Foundation CSS, labels are used to display the additional info about the element. The label coloring is used to give different colors to the label using various classes.

Foundation CSS Label Coloring classes:

primary: It is used to highlight the information with a sky blue color to the text, which marks as important.
secondary: It highlights the text with a greyish color that marks the less important text.
success: It highlights the text with a green color that represents the completion of some action.
alert: It highlights the text with a red color that represents the incomplete action with danger.
warning: It highlights the text with a yellow that represents some warning action.

Syntax:

<span class="label color">
    ...
</span>

Example 1: The below example illustrates the use of Label Coloring using the label, primary, and secondary classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Label Coloring classes</title> 
  
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
    crossorigin="anonymous"> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
  
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" 
    crossorigin="anonymous"> 
    </script> 
  
    <style> 
        .label{ 
            font-size: 1.5rem; 
        } 
    </style> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h3>Foundation CSS Label Coloring</h3> 
  
    <div class="label primary"> 
        Primary 
    </div> 
  
    <div class="label secondary"> 
        Secondary 
    </div> 
  </center> 
</body> 
  
</html>

Output:

Example 2: The below example illustrates the use of Label Coloring using the label, success, alert, and warning classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Label Coloring classes</title> 
    
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
    crossorigin="anonymous"> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
  
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" 
    crossorigin="anonymous"> 
    </script> 
      
    <style> 
        .label{ 
            font-size: 1.5rem; 
        } 
    </style> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h3>Foundation CSS Label Coloring</h3> 
  
    <div class="label success"> 
        Success 
    </div> 
  
    <div class="label alert"> 
        Alert 
    </div> 
  
    <div class="label warning"> 
        Warning 
    </div> 
  </center> 
</body> 
  
</html>