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.
c-label
Handlebars
Label text
Razor
Open in new tabLoading...
Javascript
Loading...
The component have different sizes available, matching the foundation sizes.
Handlebars
Label in micro size
Razor
Open in new tabLoading...
Handlebars
Label in tiny size
Razor
Open in new tabLoading...
Handlebars
Label in small size
Razor
Open in new tabLoading...
Handlebars
Label in medium size
Razor
Open in new tabLoading...
Handlebars
Label in large size
Razor
Open in new tabLoading...
Handlebars
Label in huge size
Razor
Open in new tabLoading...
Modifiers
c-label with icon
The label can also have an icon
Handlebars
Razor
Open in new tabLoading...
Variants
c-label > c-label--sale
The sale label is used to remark a price with a discount percentage or a lower price.
Handlebars
Sale price or discount
Razor
Open in new tabLoading...
The label badge is used when you want to use a color scheme that has background.
c-label > c-label--badge with cs-brand-primary
Handlebars
Label text
Razor
Open in new tabLoading...
Open collapsible to see label with all brand color schemes.
c-label cs-brand-primary
Label text
c-label cs-band-primary--white
Label text
c-label cs-brand-primary--light
Label text
c-label cs-brand-primary--dark
Label text
c-label cs-brand-secondary
Label text
c-label cs-brand-secondary--white
Label text
c-label cs-brand-secondary--light
Label text
c-label cs-brand-secondary--dark
Label text
States
When used to tag a state, labels change its style to that state's look and feel.
c-label cs-state-success
Handlebars
success
Razor
Open in new tabLoading...
c-label cs-state-warning
Handlebars
warning
Razor
Open in new tabLoading...
c-label cs-state-error
Handlebars
error
Razor
Open in new tabLoading...
c-label cs-state-info
Handlebars
info
Razor
Open in new tabLoading...
c-label c-label--canceled-state
Canceled
When variant is badge:
c-label cs-state-success
success
c-label cs-state-warning
warning
c-label cs-state-error
error
c-label cs-state-info
info
c-label c-label--canceled-state
Canceled
Collections
Sorry, this brand has no collections.