Foundation CSS Badge Sass Reference
Last Updated :
01 Sep, 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 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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<link rel="stylesheet" href="style.css">
<style>
body {
margin-left:20px;
margin-right:20px;
}
div{
border:2px solid green;
}
</style>
</head>
<body>
<h1 style="text-align:center;
color:green">GeeksforGeeks</h1>
<h3 style="text-align:center;">
A computer science portal for geeks</h3>
<center>
<span class="badge">One</span>
<span class="badge">Welcome</span>
<span class="badge">GfG</span>
</center>
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<link rel="stylesheet" href="style.css">
<style>
body {
margin-left:20px;
margin-right:20px;
}
div{
border:2px solid green;
}
</style>
</head>
<body>
<h1 style="text-align:center;
color:green">GeeksforGeeks</h1>
<h3 style="text-align:center;">
A computer science portal for geeks</h3>
<center>
<span class="badge">One</span>
<span class="badge">Welcome</span>
<span class="badge">GfG</span>
</center>
</body>
</html>
|
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...