Info Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Colours
Brand
| Token | Role | Value | Example |
|---|---|---|---|
| primary | Primary brand colour |
rgba(0, 0, 0, 1) #000000 |
|
| accent-1 | Highlight Colour |
rgba(242, 239, 238, 1) #F2EFEE |
|
| Highlight | Primary brand colour |
rgba(216, 78, 18, 1) #D84E12 |
Functional
| Token | Role | Value | Example |
|---|---|---|---|
| success-bg | Success background |
#F2FDF5 |
|
| success-content | Foreground content color to use on success color |
#459452 |
Aa |
| warning-bg | Warning background |
#FEFCEA |
|
| warning-content | Foreground content color to use on warning color |
#F59E0B |
Aa |
| error-bg | Error Background |
#FCF2F2 |
|
| error-content | Foreground content color to use on error color |
#F51010 |
Aa |
Background
| Token | Role | Value | Example |
|---|---|---|---|
| white | Background color used for the main page body |
rgb(255, 255, 255) #FFFFFF |
|
| dark-overlay | Background color used for overlays | rgba(222, 222, 222, 0.72) |
Typography
| Token | Role | Value | Example |
|---|---|---|---|
| grey-1000 | Used for headlines |
#000000 |
Aa |
| grey-700 | Used for body text |
#343434 |
Aa |
| grey-500 | Weaker body text for visual hierarchy |
#999999 |
Aa |
| grey-300 | Weaker body text for visual hierarchy |
#CBCBCB |
Aa |
| grey-200 | Weaker body text for visual hierarchy |
#E5E5E5 |
Aa |
| grey-100 | Used for body text on inverse backgrounds |
#F6F6F6 |
Aa |
| link | Used for text links |
#343434 |
Aa |
| link-hover | Used for text links when hover |
#000000 |
Aa |
Typographys
| Display | Token | Size | Line-height | Weight |
|---|---|---|---|---|
| Headline 1 | text-3xl | 30px | 36px | 700 |
| Headline 2 | text-sm-caps | 14px | 20px | 700 |
| Headline 3 | text-xs-caps | 12px | 20px | 700 |
| Headline 4 | text-vs-caps | 8px | 12px | 700 |
| P1 Bold | text-base | 16px | 28px | 700 |
| P1 | text-base | 16px | 28px | 400 |
| P2 Bold | text-sm | 13px | 20px | 700 |
| P2 | text-sm | 14px | 20px | 400 |
| Button Bold | text-button | 12px | 20px | 900 |
| Button Regular | text-button | 12px | 20px | 400 |
| Text Link | link | 13px | 20px | 400 |
| Text Link Hover | link-hover | 13px | 20px 0.25px | 400 |
| Text Link M | link-m | 12px | 18px 0.25px | 400 |
| Text Link XS CAPS | link-xs-caps | 12px | 20px 0.5px | 400 |
| Text Link XXS CAPS | link-xxs-caps | 11px | 18px 0.5px | 400 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
Success Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Error Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Warring Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Toaster notification
Error Toaster
Slideout
Heading 1
Content slideout 1
Heading 2
Content slideout 2
Modal dialog
Content modal
Additionals
Pagination
Breadcrumbs
- Home
- Styleguide
Accordion
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Accordion custom
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Badge & label
| Display | Token |
|---|---|
| Badge | badge |
| Badge 2 | badge-2 |
| Badge 3 | badge-3 |
Preact modules
Carousel
Swiper carousel
Native
Component
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Thumbs
Embla Carousel
Icons
| Code | Preview |
|---|---|
| icon-menu | |
| icon-shopping-bag | |
| icon-close | |
| icon-faild | |
| icon-success | |
| icon-search | |
| icon-link-outline | |
| icon-facebook-2 | |
| icon-twitter | |
| icon-facebook | |
| icon-instagram | |
| icon-email | |
| icon-chevron-up | |
| icon-chevron-right | |
| icon-chevron-left | |
| icon-chevron-down | |
| icon-link-break | |
| icon-bell-simple |
| Code | Preview |
|---|---|
| icon-filter | |
| icon-person | |
| icon-help | |
| icon-error-circle | |
| icon-info-cirlce | |
| icon-success-circle | |
| icon-phone | |
| icon-image | |
| icon-map | |
| icon-note | |
| icon-gift | |
| icon-tag | |
| icon-giftcard | |
| icon-calendar | |
| icon-repeat | |
| icon-truck | |
| icon-plus | |
| icon-minus |
| Code | Preview |
|---|---|
| icon-bookmark | |
| icon-eye | |
| icon-heart | |
| icon-store | |
| icon-blog | |
| icon-chat | |
| icon-logout | |
| icon-share-social | |
| icon-visa | |
| icon-mastercard | |
| icon-paypal | |
| icon-googlepay | |
| icon-applepay | |
| icon-klarna | |
| icon-zip | |
| icon-afterpay |