sunweb

Label

components label

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
Loading...

Javascript

Loading...

The component have different sizes available, matching the foundation sizes.

Handlebars

Label in micro size
Loading...

Handlebars

Label in tiny size
Loading...

Handlebars

Label in small size
Loading...

Handlebars

Label in medium size
Loading...

Handlebars

Label in large size
Loading...

Handlebars

Label in huge size
Loading...

Modifiers


c-label with icon

The label can also have an icon

Handlebars

Label text with icon
Loading...

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
Loading...

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
Loading...

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

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
Loading...
c-label cs-state-warning

Handlebars

warning
Loading...
c-label cs-state-error

Handlebars

error
Loading...
c-label cs-state-info

Handlebars

info
Loading...
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


When used to tag a collection, labels change its style to that collection's look and feel.

c-label cs-theme-boutique

Handlebars

boutique
Loading...
c-label cs-theme-cycling

Handlebars

cycling
Loading...
c-label cs-theme-excellent

Handlebars

excellent
Loading...
c-label cs-theme-famfun

Handlebars

famfun
Loading...
c-label cs-theme-secrets

Handlebars

secrets
Loading...
c-label cs-theme-selections

Handlebars

selections
Loading...
c-label cs-theme-villages

Handlebars

villages
Loading...
c-label cs-theme-xperience

Handlebars

xperience
Loading...
c-label cs-theme-atlantis

Handlebars

atlantis
Loading...
c-label cs-theme-totally_snow

Handlebars

totally_snow
Loading...

Collections with icon


c-label cs-theme-boutique

Handlebars

boutique
Loading...
c-label cs-theme-cycling

Handlebars

cycling
Loading...
c-label cs-theme-excellent

Handlebars

excellent
Loading...
c-label cs-theme-famfun

Handlebars

famfun
Loading...
c-label cs-theme-secrets

Handlebars

secrets
Loading...
c-label cs-theme-selections

Handlebars

selections
Loading...
c-label cs-theme-villages

Handlebars

villages
Loading...
c-label cs-theme-xperience

Handlebars

xperience
Loading...
c-label cs-theme-atlantis

Handlebars

atlantis
Loading...
c-label cs-theme-totally_snow

Handlebars

totally_snow
Loading...