 |
VOOZH | about |
|
VOOZH | about |
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 a number of unread items & also help 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.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|---|---|---|
| $badge-background | This variable is used to define the default background color for badges. | Color | $primary-color |
| $badge-color | This variable is used to define the default text color for badges. | Color | $white |
| $badge-color-alt | This variable is used to define the alternate text color for badges. | Color | $black |
| $badge-palette | This variable is used to define the coloring classes | Map | $foundation-palette |
| $badge-padding | This variable is used to define the default padding inside badges. | Number | 0.3em |
| $badge-minwidth | This variable is used to define the minimum width of a badge. | Number | 2.1em |
| $badge-font-size | This variable is used to define the default font size for badges. | Number | 0.6rem |
Example 1: In the below code, we will make use of the above variable to demonstrate the badge.
SASS Code:
$badge-background:green;
.badge{
background-color:$badge-background;
}
Compiled CSS Code:
.badge {
background-color: green;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the badge.
SASS Code:
$badge-color:rgb(161, 171, 161);
.badge{
color:$badge-color;
}
Compiled CSS Code:
.badge {
color: #a1aba1;
}
Output:
Reference: https://get.foundation/sites/docs/badge.html
