Colours

Global Colours

primary

primary-hover

Aa

primary-content

secondary

secondary-hover

Aa

secondary-content

Brands

cw-primary

cw-hover

ca-primary

ca-hover

yakamito-primary

yakamito-hover

nitro-primary

nitro-hover

Functional Colours

success

warning

error

Background Colours

white

grey-100

background-overlay

Typography Colours

Aa

grey-900

Aa

grey-700

Aa

grey-500

Aa

grey-400

Aa

white

Border Colours

border-default

border-focus

border-error

Typographys

Headline 1

Headline 2

Headline 3

Headline 4

Title 1

Title 2

Title 2

Body

Body Semi Bold

Body text link

Body small

Buttons

Style - Filled

Style - Outlined

Style - Hollow

Forms

Text inputs

Error related info text

Text area

Dropdown

Radio button

Checkboxes

Toggle

Toggle Off
Toggle On
Toggle Disabled Off
Toggle Disabled On

Modules

Notifications & Alerts

There were 2 error with your submission

  • Your password must be at least 8 characters
  • Your password must include at least one pro wrestling finishing move

Attention needed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Success! Something went exactly as planned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Additionals

Quantity Counter

Pagination

Review Stars

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.

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.

Carousel

Carousel Grid

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Carousel Banner

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Icons

Code Preview
icon-menu
icon-shopping-bag
icon-close
icon-faild
icon-success
icon-search
icon-map-pin
icon-arrow-circle-right
icon-facebook
icon-youtube
icon-instagram
icon-person
icon-arrow-left
icon-chevron-up
icon-chevron-right
icon-chevron-left
icon-check
icon-trash
Code Preview
icon-filter
icon-share
icon-help
icon-message
icon-phone
icon-store-front
icon-add-outline
icon-remove-outline
icon-plus-circle
icon-clock