Badge
Easlily create nicely looking badges to label and highlight your content.
Usage
To create a badge, just add the .f-badge
class to a <div>
or <span>
element.
Example
Info New Free
Markup
<div class="f-badge">...</div>
Modifiers
To display badges in a different style, just add modifier classes to the .f-badge
class. These modifiers can be combined with each other.
Notification
Add the .f-badge-notification
class to indicate a notification, typically it is used with numbers.
Example
1 2 3 10 100
Markup
<div class="f-badge f-badge-notification">...</div>
Color Modifier
Add the .f-badge-success
, .f-badge-warning
or .f-badge-danger
class for additional colors.
Example
Success Warning Danger
1 10 1 10 1 10
Markup
<div class="f-badge f-badge-success">...</div>
<div class="f-badge f-badge-warning">...</div>
<div class="f-badge f-badge-danger">...</div>
Inverted Modifier
Add the .f-badge-inverted
class with any of the above classes to invert the background and color.
Example
Success Warning Danger
1 10 1 10 1 10
Markup
<div class="f-badge f-badge-success f-badge-inverted">...</div>
<div class="f-badge f-badge-warning f-badge-inverted">...</div>
<div class="f-badge f-badge-danger f-badge-inverted">...</div>