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

React

label text
Loading...

Javascript

Loading...

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

React

Label in micro size
Loading...

React

Label in tiny size
Loading...

React

Label in small size
Loading...

React

Label in medium size
Loading...

React

Label in large size
Loading...

React

Label in huge size
Loading...

Modifiers


c-label with icon

The label can also have an icon

React

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.

React

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

React

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

React

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

React

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

React

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

React

info
Loading...

When variant is badge:

c-label cs-state-success

React

success
c-label cs-state-warning

React

warning
c-label cs-state-error

React

error
c-label cs-state-info

React

info

Collections


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

c-label cs-theme-boutique

React

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

React

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

React

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

React

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

React

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

React

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

React

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

React

xperience
Loading...

Collections with icon


c-label cs-theme-boutique

React

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

React

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

React

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

React

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

React

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

React

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

React

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

React

xperience
Loading...