Foundation CSS Badge
Last Updated :
09 Feb, 2022
Foundation CSS is an open-source & 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 & can be accessible to any device. It is utilized by many groups including Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is constructed on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It additionally comes with CLI, so it’s easy to apply with module bundlers. It gives the Fastclick.js tool for quicker rendering on mobile devices.
Badges are used for creating labels with numbers that display out a number of unread items & also helps to match the size of the immediate parent elements with relative font sizes. Foundation CSS generally uses .badge class with the <span> element to create badges.
Syntax:
<span class="badge"> Contents </span>
Example: This example demonstrates the basic badge made using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Badge</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Badge</strong>
<br/>
<span class="badge">1</span>
<span class="badge">Hello</span>
<span class="badge">GeeksforGeeks</span>
</center>
</body>
</html>
|
Output:
Foundation CSS Badge
Color Customization: To customize the color of badges, we can use the color classes provided by Foundation CSS along with badge classes.
Syntax:
<span class="badge color-class"> Content </span>
Following are the 5 types of color classes available in Foundation CSS:
- 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.
Example: This example demonstrates the basic badge with the various available color classes in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Color Badge</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Badge</strong>
<br/>
<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge success">Success</span>
<span class="badge alert">Alert</span>
<span class="badge warning">Warning</span>
</center>
</body>
</html>
|
Output:
Foundation CSS Color Badge
Reference: https://get.foundation/sites/docs/badge.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...