Definition
Label component is a visual component that provides certain extra information.
This component requires a color scheme in order to show the background color. This is why the examples are showed with the primary color scheme applied.
Handlebars
Razor
Open in new tabJavascript
The component have different sizes available, matching the foundation sizes.
Handlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabModifiers
The label can also have an icon
Handlebars
Razor
Open in new tabVariants
The sale label is used to remark a price with a discount percentage or a lower price.
Handlebars
Razor
Open in new tabThe label badge is used when you want to use a color scheme that has background.
Handlebars
Razor
Open in new tabOpen collapsible to see label with all brand color schemes.
States
When used to tag a state, labels change its style to that state's look and feel.
Handlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabWhen variant is badge:
Collections
When used to tag a collection, labels change its style to that collection's look and feel.