Components

Introduction

Typography

Header

Header - H1

Header / H2

Header / H3

Header / H4

Header / H5
Header / H6

Label

text-label-1

text-label-2

text-label-3

text-label-4

text-label-5

Body

text-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.

text-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.

text-body-3

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.

text-body-4

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.

Quote

text-quote-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.

text-quote-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.

text-quote-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet nunc nec dolor consectetur

Colors

Brand

Primary

Secondary

Accent

Semantic

Info

Success

Sale

Warning

Neutral

900

600

400

100

000

Buttons

Primary buttons

Secondary buttons

Link

Read more

Arrows

Labels

Sale New Sustainable

Popup

Accordion

Open

Closed

Text input

Select box

Radio buttons

Checkboxes

Product item

Walra
Uitverkocht
Walra
Uitverkocht
Walra
Uitverkocht
Walra
Uitverkocht

Article item

Pagination

Payment icons

Social icons

Icons

Border radius setup

rounded-brand-sm

rounded-brand

Container

container-content
container-full-width
no-max

Grid

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