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
The component have different sizes available, matching the foundation sizes.
Handlebars Label in micro size
Handlebars Label in tiny size
Handlebars Label in small size
Handlebars Label in medium size
Handlebars Label in large size
Handlebars Label in huge size
Modifiers c-label with icon
The label can also have an icon
Handlebars Label text with icon
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
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
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
Open Close 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
c-label cs-state-warning
Handlebars warning
c-label cs-state-error
Handlebars error
c-label cs-state-info
Handlebars info
c-label c-label--canceled-state
Canceled
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 When used to tag a collection, labels change its style to that collection's look and feel.
c-label cs-theme-boutique
Handlebars boutique
c-label cs-theme-cycling
Handlebars cycling
c-label cs-theme-excellent
Handlebars excellent
c-label cs-theme-famfun
Handlebars famfun
c-label cs-theme-secrets
Handlebars secrets
c-label cs-theme-selections
Handlebars selections
c-label cs-theme-ski_in_ski_out
Handlebars ski_in_ski_out
c-label cs-theme-villages
Handlebars villages
c-label cs-theme-xperience
Handlebars xperience
c-label cs-theme-atlantis
Handlebars atlantis
c-label cs-theme-totally_snow
Handlebars totally_snow
c-label cs-theme-primavera
Handlebars primavera
Collections with icon c-label cs-theme-boutique
Handlebars boutique
c-label cs-theme-cycling
Handlebars cycling
c-label cs-theme-excellent
Handlebars excellent
c-label cs-theme-famfun
Handlebars famfun
c-label cs-theme-secrets
Handlebars secrets
c-label cs-theme-selections
Handlebars selections
c-label cs-theme-ski_in_ski_out
Handlebars ski_in_ski_out
c-label cs-theme-villages
Handlebars villages
c-label cs-theme-xperience
Handlebars xperience
c-label cs-theme-atlantis
Handlebars atlantis
c-label cs-theme-totally_snow
Handlebars totally_snow
c-label cs-theme-primavera
Handlebars primavera