Text Colors
text-primary
greyscale-900
#000000
text-secondary
greyscale-800
#3D4644
text-faint
greyscale-600
#666666
text-disabled
greyscale-500
#8D8E8F
text-mute
greyscale-500
#8D8E8F
text-inverse
greyscale-white
#FFFFFF
text-critical
critical-700
#C81111
text-success
success-700
#0B8036
text-warning
warning-700
#000000
text-info
info-700
#000000
Background
bg-background-default
greyscale-white
#FFFFFF
bg-background-light
greyscale-100
#F3F5FA
bg-background-dark
greyscale-700
#555555
bg-background-inverse
greyscale-900
#000000
bg-background-accent-1
greyscale-100
#EAEDF3
bg-background-critical
greyscale-white
#FFFFFF
bg-background-success
greyscale-white
#FFFFFF
bg-background-warning
greyscale-white
#FFFFFF
bg-background-info
greyscale-white
#FFFFFF
Border
border-primary
greyscale-300
#DFE2E9
border-accent-1
brand-500
#8D8E8F
border-inverse
greyscale-white
#FFFFFF
border-focus
greyscale-900
#000000
border-input-default
greyscale-500
#8D8E8F
border-input-selected
greyscale-900
#000000
border-input-entered
greyscale-500
#8D8E8F
border-critical
critical-700
#C81111
border-success
success-700
#0B8036
border-warning
warning-700
#555555
border-info
info-900
#000000
Icon
icon-primary
greyscale-900
#000000
icon-secondary
greyscale-500
#8D8E8F
icon-disabled
greyscale-500
#8D8E8F
icon-inverse
greyscale-white
#FFFFFF
icon-accent-1
greyscale-100
#EAEDF3
icon-critical
critical-700
#C81111
icon-success
success-700
#0B8036
icon-warning
warning-700
#555555
icon-info
greyscale-900
#000000
Button
Fill Button
btn-primary-default-text
white
#FFFFFF
btn-primary-hover-text
white
#FFFFFF
btn-primary-disabled-text
greyscale-500
#8D8E8F
btn-primary-default-background
greyscale-900
#000000
btn-primary-hover-background
greyscale-800
#3D4644
btn-primary-disabled-background
greyscale-100
#F3F5FA
btn-primary-default-border
greyscale-900
#000000
btn-primary-hover-border
greyscale-800
#3D4644
btn-primary-disabled-border
greyscale-100
#F3F5FA
Secondary Button
btn-secondary-default-text
greyscale-900
#000000
btn-secondary-hover-text
greyscale-900
#000000
btn-secondary-disabled-text
greyscale-500
#8D8E8F
btn-secondary-default-background
greyscale-white
#FFFFFF
btn-secondary-hover-background
greyscale-100
#F3F5FA
btn-secondary-disabled-background
greyscale-100
#F3F5FA
btn-secondary-default-border
greyscale-700
#555555
btn-secondary-hover-border
greyscale-100
#F3F5FA
btn-secondary-disabled-border
greyscale-100
#BBBDBF
Inverse Button
btn-inverse-default-text
greyscale-900
#000000
btn-inverse-hover-text
greyscale-900
#000000
btn-inverse-disabled-text
greyscale-500
#8D8E8F
btn-inverse-default-background
greyscale-100
#F3F5FA
btn-inverse-hover-background
greyscale-100
#EAEDF3
btn-inverse-disabled-background
greyscale-100
#F3F5FA
btn-inverse-default-border
greyscale-200
#F3F5FA
btn-inverse-hover-border
greyscale-100
#EAEDF3
btn-inverse-disabled-border
greyscale-100
#F3F5FA
Headings
Headline
Headline
Headline
Headline
Headline
Headline
Body
Paragraph
Paragraph
Paragraph
Paragraph
Links, Buttons & Labels and others
Heading 1
Lorem ipsum dolor sit amet consectetur. Malesuada purus scelerisque purus condimentum id consectetur viverra feugiat aliquam. Lacinia dictum enim neque sem tincidunt viverra. Ultrices purus eget turpis justo.
Lorem ipsum dolor sit amet consectetur. Ipsum neque ac mattis ipsum maecenas nulla. Sit arcu pharetra purus pretium volutpat. Urna neque dolor interdum orci. Nunc sodales consequat enim posuere ultrices proin nibh ultrices. Augue orci morbi tincidunt gravida urna ultricies egestas.
Heading 2
Lorem ipsum dolor sit amet consectetur. Facilisis ullamcorper vulputate pharetra ullamcorper vitae id adipiscing euismod pulvinar. Volutpat faucibus condimentum sollicitudin tellus volutpat vitae. Faucibus.
Lorem ipsum dolor sit amet consectetur. Vitae libero duis ut etiam enim mauris mi. Tortor nunc metus urna eget sit. Lobortis curabitur sed convallis metus vivamus malesuada aliquam neque. Sed dui aliquam tempor vitae eros. Nisl volutpat vitae blandit fermentum leo. Pulvinar magnis diam arcu.
Heading 3
Lorem ipsum dolor sit amet consectetur. Vitae libero duis ut etiam enim mauris mi. Tortor nunc metus urna eget sit. Lobortis curabitur sed convallis metus vivamus malesuada aliquam neque. Sed dui aliquam tempor vitae eros. Nisl volutpat vitae blandit fermentum leo. Pulvinar magnis diam arcu.
Bodycopy Lorem ipsum dolor sit amet consectetur. Duis dui purus viverra non sollicitudin interdum nulla bibendum. Tincidunt habitasse tempus tellus ut maecenas amet malesuada viverra.
Author Name
Heading 3
Lorem ipsum dolor sit amet consectetur. Pulvinar tempor convallis sagittis a viverra diam augue porttitor pharetra. Placerat risus lectus nunc lectus.
- Usability testing. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you've designed? By running a usability test, you'll be able to see how users will interact with your design once it's live.
- Involving stakeholders. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real.
- Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience.
- Communicating your vision. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.
Heading 4
Lorem ipsum dolor sit amet consectetur. In auctor non vitae sit imperdiet dignissim tortor diam. Pulvinar quis amet nisl etiam. Risus sed ut nunc nunc dolor eget leo sed bibendum. Etiam at magna iaculis nibh potenti eu praesent.
Heading 5
Lorem ipsum dolor sit amet consectetur. Odio ultrices tortor enim cras quam egestas sed. Suspendisse turpis ac sit sit. Hendrerit nunc congue nec massa at cras mi id. Potenti morbi hendrerit vestibulum facilisi nunc.
Heading 6
- Lorem ipsum dolor sit amet consectetur.
- Nec lectus integer faucibus metus a scelerisque nec. Nunc pellentesque viverra urna nulla et augue lobortis faucibus turpis.
- Ornare nec proin vulputate eu. Vitae consequat.
| Element | Default | Error | Disabled | Classes |
|---|---|---|---|---|
Input (No Label)
|
|
|
|
core-input
|
Input with Label
|
|
|
|
core-input
|
Textarea
|
|
|
|
core-textarea
|
Dropdown
|
|
|
|
core-dropdown
|
Validation
|
|
|||
Notification
| Type | Default | Usage |
|---|---|---|
Info
|
Translation missing: en.toast.info.default 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
|
Translation missing: en.toast.warning.default Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Info
|
|
core-toast
|
Success
|
|
core-toast
|
Error
|
|
core-toast
|
Warning
|
|
core-toast
|
Modal
| Type | Example | Usage |
|---|---|---|
Slideout Bottom
|
Heading slideoutLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
drawer-content
custom-drawer
|
Slideout Right
|
Heading slideoutLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
drawer-content
custom-drawer
|
Modal Dialog
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
modal-content
|
Icon Library
plus
minus
account
search
wishlist
cart
hamburger
close
error
success
warning
info
chevron-down
arrow-right
check-circle
x-circle
facebook
instagram
pinterest
tiktok
snapchat
x
arrow-elbow-down-right
notice-error
notice-success
notice-warning
notice-info
