Foundation CSS Kitchen Sink Badge

Last Updated : 02 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Kitchen Sink has the foundation elements to work well in our websites and applications. The Badge is the label that is used to highlight the information like messages and is displayed in rounded icons. These badges can have colors with variants that depict their importance or the action needed to take based on the priority.

Foundation CSS Kitchen Sink Badge Classes:

badge: It is used to create the badge with rounded corners.
primary badge: It is used to highlights with a sky blue color in the text, which marks as important.
secondary badge: It is used to highlights the text with a grey color which marks it as of less importance.
success badge: It is used to highlights the text with a green color representing the completion of some action.
alert badge: It is used to highlights the text with a red color representing incomplete action with danger.
warning badge: It is used to highlights the text with a yellow color representing some warning action.

Syntax:

<span class="Kitchen-Sink-Badge-Classes"> ... </span>

Example: This example describes the Kitchen Sink simple badges in Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink</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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1>  
        <h4>Foundation CSS Kitchen Sink Badge</h4> 
        <br />  
        <span class="badge">1  
        <span class="badge">GFG  
        <span class="badge">Notification  
    </center> 
</body> 
</html>

Output:

Foundation CSS Kitchen Sink Badge

Example: This example describes the Kitchen Sink alphabetic badge in Foundation CSS with the color variants.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink</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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
          GeeksforGeeks 
          </h1> 
        <h4>Foundation CSS Kitchen Sink Badges</h4> 
        <br />  
        <span class="badge primary">Pri  
        <span class="badge secondary">Sec  
        <span class="badge success">S  
        <span class="badge alert">A  
        <span class="badge warning">W  
    </center> 
</body> 
</html>