Foundation CSS Badge
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.
<span class="badge"> Contents </span>
Example: This example demonstrates the basic badge made using Foundation CSS.
Color Customization: To customize the color of badges, we can use the color classes provided by Foundation CSS along with badge classes.
<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.