Colors
Text Colors
text-primary
text-secondary
text-faint
text-disabled
text-inverse
text-accent-1
text-sale
text-critical
text-success
text-warning
text-info
text-link-default
text-link-hover
text-muted
text-warning-light
Background Colors
background-default
background-light
background-lighter
background-inverse
background-sale
background-critical
background-success
background-warning
background-info
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
Typography
Headings
heading-1
heading-2
heading-3
heading-4
heading-5
heading-6
Body Text
body-core
body-core-emphasis
body-large
body-large-emphasis
Labels
text-badge
link-core
Icons
Buttons + Links
Links
Forms
Selectors
Inputs
Components
Pagination
Loader
Tooltip
Breadcrumbs
Accordion - many may be opened
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Accordion - Only one may be opened
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Question goes here
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nobis fugit, deserunt perferendis distinctio nihil totam magnam quisquam dolore vero atque sapiente numquam, id sequi quos qui. Nobis, corporis consequatur!
Tabs
Content 1.
Content 2.
Content 3.
Modal
Toast
Preact Examples
Carousel
Carousel Outside
Carousel Inside
Cards
Product card
Article card
Tables
Standard Table
| size | au | uk | europe |
|---|---|---|---|
| 6 | 4 | 6 | 32 |
| 8 | 6 | 8 | 34 |
| 10 | 8 | 10 | 36 |
| 12 | 10 | 12 | 38 |
| 14 | 12 | 14 | 40 |
| 16 | 14 | 16 | 42 |
| 18 | 16 | 18 | 44 |
Large Table
| size | au | uk | europe | us | japan | korea |
|---|---|---|---|---|---|---|
| 6 | 4 | 6 | 32 | 2 | 21 | 220 |
| 8 | 6 | 8 | 34 | 4 | 23 | 222 |
| 10 | 8 | 10 | 36 | 6 | 25 | 224 |
| 12 | 10 | 12 | 38 | 8 | 27 | 226 |
| 14 | 12 | 14 | 40 | 10 | 29 | 228 |
| 16 | 14 | 16 | 42 | 12 | 31 | 230 |
| 18 | 16 | 18 | 44 | 14 | 33 | 232 |
WYSIWYG Table
| AUS/UK | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 |
|---|---|---|---|---|---|---|---|---|
| Bust (CM) | 76 | 81 | 86 | 91 | 96 | 101 | 106 | 111 |
| Waist (CM) | 58 | 63 | 68 | 73 | 78 | 83 | 88 | 93 |
| Hips (CM) | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 |