Foundation CSS Badge 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 Badge Coloring Classes in Foundation CSS.

In Foundation CSS Badges are used for creating additional information about the content. It also helps to match the size of the immediate parent elements with relative font sizes.

Foundation CSS Badge 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="badge color">
    .......
</span>

Example 1: Below example illustrates the use of Badge Coloring using the primary and secondary classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Badge 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> 
        .badge{ 
            font-size: 1.5rem; 
        } 
    </style> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h3>Foundation CSS Badge Coloring</h3> 
  
    <div class="badge primary"> 
        Primary 
    </div> 
  
    <div class="badge secondary"> 
        Secondary 
    </div> 
  </center> 
</body> 
  
</html>

Output:

Foundation CSS Badge Coloring with Primary, and Secondary Classes

Example 2: Below example illustrates the use of Badge Coloring using the success, alert, and warning class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Badge 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> 
        .badge{ 
            font-size: 1.5rem; 
        } 
    </style> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h3>Foundation CSS Badge Coloring</h3> 
  
    <div class="badge success"> 
        Success 
    </div> 
  
    <div class="badge alert"> 
        Alert 
    </div> 
  
    <div class="badge warning"> 
        Warning 
    </div> 
  </center> 
</body> 
  
</html>