Success notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Colours
Text
| Token | Value | Example |
|---|---|---|
| text-primary |
rgba(17, 24, 39, 1) #111827 |
Aa |
| text-secondary |
rgba(68, 68, 69, 1) #444445 |
Aa |
| text-faint |
rgba(130, 131, 132, 1) #828384 |
Aa |
| text-muted |
rgba(215, 216, 217, 1) #D7D8D9 |
Aa |
| text-disabled |
rgba(178, 178, 178, 1) #B2B2B2 |
Aa |
| text-inverse |
rgba(255, 255, 255, 1) #FFF |
Aa |
| text-accent-brand |
rgba(3, 131, 68, 1) #038344 |
Aa |
| text-link-default |
rgba(17, 24, 39, 1) #111827 |
Aa |
| text-link-hover |
rgba(68, 68, 69, 1) #444445 |
Aa |
| text-link-visited |
rgba(130, 131, 132, 1) #828384 |
Aa |
| text-link-inverse |
rgba(255, 255, 255, 1) #FFF |
Aa |
| text-system-success |
rgba(3, 131, 68, 1) #038344 |
Aa |
| text-system-warning |
rgba(161, 98, 7, 1) #A16207 |
Aa |
| text-system-error |
rgba(185, 28, 28, 1) #B91C1C |
Aa |
| text-system-information |
rgba(100, 101, 102, 1) #646566 |
Aa |
Background
| Token | Value | Example |
|---|---|---|
| background-default |
#FFFFFF |
|
| background-primary |
#F4F4F4 |
|
| background-secondary |
#038344 |
|
| background-tertiary |
#444445 |
|
| background-quad |
#B8B8B8 |
|
| background-light |
#B91C1C |
|
| background-disabled |
#F4F4F4 |
|
| background-modal |
rgba(0, 0, 0, 0.30) |
|
| interactive |
#038344 |
|
| background-action-primary-hover |
#14532D |
|
| background-action-primary-focus |
#22C55E |
|
| background-action-secondary-default |
#444445 |
|
| background-action-secondary-hover |
#038344 |
|
| background-action-secondary-focus |
#0EA5E9 |
|
| background-action-inverse-default |
#FFFFFF |
|
| background-action-inverse-hover |
#F4F4F4 |
|
| background-action-inverse-focus |
#F4F4F4 |
|
| background-system-success |
#DCFCE7 |
|
| background-system-error |
#FEF9C3 |
|
| background-system-warning |
#FFEBEB |
|
| background-system-information |
#FFFFFF |
Border
| Token | Value | Example |
|---|---|---|
| border-bounds |
#D7D8D9 |
|
| border-divider |
#D7D8D9 |
|
| border-divider-inverse |
#B2B2B2 |
|
| border-input-default |
#B2B2B2 |
|
| border-input-active |
#038344 |
|
| border-input-focus |
#22C55E |
|
| border-input-disabled |
#F4F4F4 |
|
| border-input-inverse-dark |
#B2B2B2 |
|
| border-input-inverse-light |
#FFFFFF |
|
| border-system-success |
#038344 |
|
| border-system-error |
#B91C1C |
|
| border-system-warning |
#F7941E |
|
| border-system-information |
#444445 |
Typographys
| Display | Token | Size | Line-height | Weight | LetterSpacing |
|---|---|---|---|---|---|
| Headline 1 | text-5xl | 48px | 54px | 500 | 0 |
| Headline 2 | text-4xl | 36px | 42px | 500 | 0 |
| Headline 3 | text-3xl | 30px | 36px | 500 | 0 |
| Headline 4 | text-2xl | 24px | 32px | 500 | 0 |
| Headline 5 | text-xl | 20px | 28px | 500 | 0 |
| Headline 6 | text-lg | 18px | 24px | 500 | 0 |
| P1 Bold | text-base | 16px | 24px | 500 | 0 |
| P1 | text-base | 16px | 24px | 400 | 0 |
| P2 Bold | text-sm | 14px | 20px | 500 | 0 |
| P2 | text-sm | 14px | 20px | 400 | 0 |
| P3 Bold | text-xs | 12px | 16px | 500 | 0.75px |
| P3 | text-xs-regular | 12px | 16px | 400 | 0 |
| Button Bold | text-button | 16px | 22px | 500 | 0 |
| Button Regular | text-button | 16px | 22px | 400 | 0 |
| Text Link | link | 16px | 24px | 400 | 0 |
| Text Link Hover | link-hover | 16px | 24px | 400 | 0 |
Forms
Text inputs
Invalid email address
Text inputs Label
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
Error notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Info Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Warning notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Success notification
Error notification
Info Notification
Warning notification
Default Toaster
Success Toaster
Error Toaster
Slideout
Heading 1
Content slideout 1
Heading 2
Content slideout 2
Modal dialog
Content modal
Tooltips
Tooltips Left Up
This is a guide to help you chose your tank size. (length x width = m2). e.g. if you have a shed 8m long and 6m wide your catchment area is 48m2.
Tooltips Center Up
This is a guide to help you chose your tank size. (length x width = m2). e.g. if you have a shed 8m long and 6m wide your catchment area is 48m2.
Tooltips Right Up
This is a guide to help you chose your tank size. (length x width = m2). e.g. if you have a shed 8m long and 6m wide your catchment area is 48m2.
Tooltips Left Bottom
This is a guide to help you chose your tank size. (length x width = m2). e.g. if you have a shed 8m long and 6m wide your catchment area is 48m2.
Tooltips Center Bottom
This is a guide to help you chose your tank size. (length x width = m2). e.g. if you have a shed 8m long and 6m wide your catchment area is 48m2.
Tooltips Right Bottom
This is a guide to help you chose your tank size. (length x width = m2). e.g. if you have a shed 8m long and 6m wide your catchment area is 48m2.
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.
Badge & label
| Display | Token |
|---|---|
| Badge | badge |
| Badge 2 | badge-2 |
| Badge 3 | badge-3 |
Vertical Scroll
Preact modules
Carousel
Carousel Swiper
Fullwidth
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Grid
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Icons
| Code | Preview |
|---|---|
| icon-menu | |
| icon-close | |
| icon-faild | |
| icon-success | |
| icon-search | |
| icon-chevron-up | |
| icon-chevron-right | |
| icon-chevron-left | |
| icon-chevron-down | |
| icon-person |
| Code | Preview |
|---|---|
| icon-filter | |
| icon-error-circle | |
| icon-info-cirlce | |
| icon-success-circle | |
| icon-phone | |
| icon-tag | |
| icon-repeat | |
| icon-plus | |
| icon-minus | |
| icon-share |
| Code | Preview |
|---|---|
| icon-share | |
| icon-facebook | |
| icon-email | |
| icon-linked | |
| icon-heart | |
| icon-blog | |
| icon-chat | |
| icon-logout | |
| icon-trash | |
| icon-location | |
| icon-email |
