Styleguide
Design Tokens
Colors
Text Colors
Background Colors
Border Colors
Icon Colors
Typography
Headlines
Body Text
Links
Icon Library
| Default | Disabled | With Icon | With Loading | Classes |
|---|---|---|---|---|
|
|
|
|
|
button-fill-default
button-small
|
|
|
|
|
|
button-fill-default
button-medium
|
|
|
|
|
|
button-fill-default
button-large
|
|
|
|
|
|
button-fill-inverse
|
|
|
|
|
|
button-fill-accent
|
|
|
|
|
|
button-fill-transparent
|
|
|
|
|
|
button-outline-default
button-small
|
|
|
|
|
|
button-outline-default
button-medium
|
|
|
|
|
|
button-outline-default
button-large
|
|
|
|
|
|
button-outline-inverse
|
|
|
|
|
|
button-outline-accent
|
|
|
|
|
|
button-underline-default
|
|
|
|
|
|
button-underline-inverse
|
|
|
|
|
|
button-underline-accent
|
| Element | Default | Error | Disabled | Classes |
|---|---|---|---|---|
Input
|
|
|
|
core-input
|
Textarea
|
|
|
|
core-textarea
|
Dropdown
|
Category
|
Category
|
Category
|
core-select
|
Search
|
|
|
|
core-search-input
|
Quantity
|
|
|
quantity-selector
|
|
Radio Button
|
|
|
|
core-radio
|
Checkbox
|
|
|
|
core-checkbox
|
Validation
|
|
|||
| Ratio | Example | Classes |
|---|---|---|
Auto
|
Auto
|
aspect-auto
|
4:1
|
4:1
|
aspect-4/1
|
3:1
|
3:1
|
aspect-3/1
|
2:1
|
2:1
|
aspect-2/1
|
16:9
|
16:9
|
aspect-16/9
|
3:2
|
3:2
|
aspect-3/2
|
4:3
|
4:3
|
aspect-4/3
|
5:4
|
5:4
|
aspect-5/4
|
1:1
|
1:1
|
aspect-1/1
|
4:5
|
4:5
|
aspect-4/5
|
3:4
|
3:4
|
aspect-3/4
|
2:3
|
2:3
|
aspect-2/3
|
9:16
|
9:16
|
aspect-9/16
|
Liquid Components
Pagination
You've viewed 6 of 164 products
Accordion
Accordion Item 1
This is the content for accordion item 1. It can contain any HTML content including paragraphs, lists, and other elements.
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
Accordion Item 3
This is the content for accordion item 3. The accordion component provides a clean way to organize and display collapsible content.
Loader
Badges
Product Card
Core Video
Tooltip
Light: Add Contingency
Dark: Add Contingency
Breadcrumbs
Tabs
Notification
| Type | Default | Usage |
|---|---|---|
Info
|
Info Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Success
|
Success Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Error
|
Error Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Warning
|
Warning Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Info
|
Information toast View |
core-toast
|
Success
|
Success toast View |
core-toast
|
Error
|
Error toast View |
core-toast
|
Warning
|
Warning toast View |
core-toast
|
Modal
| Type | Example |
|---|---|
Slideout Left
|
|
Slideout Right
|
|
Modal Dialog
|
