Styleguide

Colors

Text colors

text-primary

text-primary-inverse

text-secondary

text-secondary-inverse

text-disabled

text-disabled-inverse

text-accent-1

text-sale

text-critical

text-success

text-warning

text-info

text-link-default

text-link-inverse

text-link-hover

text-link-hover-inverse

Background colors

background-default

background-light

background-inverse

background-sale

background-critical

background-success

background-warning

background-info

background-dark-overlay

background-disabled

Border colors

border-divider-primary

border-divider-secondary

border-divider-inverse

border-divider-focus

border-divider-sale

border-input-default

border-input-selected

border-input-disabled

border-critical

border-success

border-warning

border-info

Icon colors

icon-primary

icon-secondary

icon-disabled

icon-inverse

icon-accent-1

icon-sale

icon-critical

icon-success

icon-warning

icon-info

Typography

headings

heading-display

heading-1

heading-2

heading-3

heading-4

heading-5

heading-6

heading-7

body-text

body-xlarge-emphasis

body-xlarge

body-large-emphasis

body-large

body-core-emphasis

body-core

body-small-emphasis

body-small

labels

button-large

button-core

link-core-emphasis link-core

Buttons

style

small

medium

large

inverse

small

medium

large

loading

small

medium

large

inverse loading

small

medium

large

text link

medium

large

text link inverse

medium

large

Forms

input

Label

Optional message

Disabled

Label

Optional message

textarea

Text area

Label

Optional message

Text area

dropdown

Dropdown

Label

Optional message

Disabled

selectors

Radio Off

Radio On

Radio Disabled

Checkbox Off

Checkbox On

Checkbox Disabled

toggle

Toggle Off

Toggle On

Toggle Disabled

quantity

Components

Notification

Info

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Success

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Error

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Warning

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Toast

Information toast

Success toast

Error toast

Warning toast

Toast Notification

pagination

You've viewed 6 of 416 products

Load More Products

loader

breadcrumb

badges

Badge 20/20 Point Score 2 20 16% off RRP 32% off RRP

Badge 2 20 2 20

accordion

Accordion Item 1

This is the content for accordion item 1. You can add any content here including lists, images, or other HTML elements.

List item 1
List item 2
List item 3

This is the content for accordion item 1.

Accordion Item 2

This is the content for accordion item 2. You can add any content here including lists, images, or other HTML elements.

List item 1
List item 2
List item 3

This is the content for accordion item 2.

Accordion Item 3

This is the content for accordion item 3. You can add any content here including lists, images, or other HTML elements.

List item 1
List item 2
List item 3

This is the content for accordion item 3.

tabs

Dialog

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.