Skip to content

Components

Default Typography

Heading and Title

Display 1

Heading 1

Heading 2

Heading 3

Title 1

Title 2

Title 3

Body

Body 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet nunc nec dolor consectetur, eget lacinia felis fringilla. Pellentesque convallis ex sed elit luctus vulputate. Curabitur lacus arcu, pharetra vitae porttitor vel, iaculis quis augue. Vivamus a pellentesque purus. Aliquam sit amet pharetra tellus. In nulla leo, ultricies eu est et, elementum porttitor nibh. Sed enim ligula, eleifend vel erat nec, consequat tincidunt sapien. Aenean volutpat arcu sed enim sollicitudin, at molestie sem porttitor. Cras fringilla tellus in tincidunt imperdiet. Donec a dolor commodo augue condimentum rutrum ac id ex. Integer rhoncus nunc nec augue dignissim, eu vulputate metus convallis.

Body 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet nunc nec dolor consectetur, eget lacinia felis fringilla. Pellentesque convallis ex sed elit luctus vulputate. Curabitur lacus arcu, pharetra vitae porttitor vel, iaculis quis augue. Vivamus a pellentesque purus. Aliquam sit amet pharetra tellus. In nulla leo, ultricies eu est et, elementum porttitor nibh. Sed enim ligula, eleifend vel erat nec, consequat tincidunt sapien. Aenean volutpat arcu sed enim sollicitudin, at molestie sem porttitor. Cras fringilla tellus in tincidunt imperdiet. Donec a dolor commodo augue condimentum rutrum ac id ex. Integer rhoncus nunc nec augue dignissim, eu vulputate metus convallis.

Others

CTA Text

Caption

Navigation

Dynamic Typography (Scale to 4k to see difference)

Heading and Title

Display 1

Heading 1

Heading 2

Heading 3

Title 1

Title 2

Title 3

Body

Body 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet nunc nec dolor consectetur, eget lacinia felis fringilla. Pellentesque convallis ex sed elit luctus vulputate. Curabitur lacus arcu, pharetra vitae porttitor vel, iaculis quis augue. Vivamus a pellentesque purus. Aliquam sit amet pharetra tellus. In nulla leo, ultricies eu est et, elementum porttitor nibh. Sed enim ligula, eleifend vel erat nec, consequat tincidunt sapien. Aenean volutpat arcu sed enim sollicitudin, at molestie sem porttitor. Cras fringilla tellus in tincidunt imperdiet. Donec a dolor commodo augue condimentum rutrum ac id ex. Integer rhoncus nunc nec augue dignissim, eu vulputate metus convallis.

Body 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet nunc nec dolor consectetur, eget lacinia felis fringilla. Pellentesque convallis ex sed elit luctus vulputate. Curabitur lacus arcu, pharetra vitae porttitor vel, iaculis quis augue. Vivamus a pellentesque purus. Aliquam sit amet pharetra tellus. In nulla leo, ultricies eu est et, elementum porttitor nibh. Sed enim ligula, eleifend vel erat nec, consequat tincidunt sapien. Aenean volutpat arcu sed enim sollicitudin, at molestie sem porttitor. Cras fringilla tellus in tincidunt imperdiet. Donec a dolor commodo augue condimentum rutrum ac id ex. Integer rhoncus nunc nec augue dignissim, eu vulputate metus convallis.

Others

CTA Text

Caption

Navigation

Colour styles

Off-white

Cream

Stroke Gray

ZR Gray

Message Green

ZR Green

Message Error

Sales

Buttons

Accordions

Here is a sample of a basic accordion component. This is a great way to display content that is not immediately shown.

Second sample of accordion. This one has the title part styled differently.

  • Menu 1
  • Menu 2
  • Menu 3

Icons

plus

chevron

burger

search

close

heart

heart_outline

cart

filter

edit

delete

language

check

account

play

pause

copy

google

apple

Inputs

Checbox and Radio

Basic Input

Dropdowns

Product PLP Card

Container

container-content
For when we want padding and max width at 2560px
container-content-no-max
For when we want padding but no max width
container-full-width
For when we want no padding and no max width

Grid - CTRL + G To Trigger

12 col item
6 col item
6 col item
3 col item
3 col item
3 col item
3 col item

Are you visiting from Netherlands?

Currently with your settings your order will be billed and shipped to Netherlands. If you want to ship your order to a different country, please select it below.