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

Handlebars

Label text
c-label cs-band-primary--white

Handlebars

Label text
c-label cs-brand-primary--light

Handlebars

Label text
c-label cs-brand-primary--dark

Handlebars

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

When variant is badge:

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

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

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