Styleguide

Typography

Find all the components needed for your website here.

This is a Header.

Large Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph

Small Paragraph

Blockquote

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

List

Heading line height is fixed
Heading line height is fixed
Heading line height is fixed

Link

Find out more

Colors

The different weights of greys and colors used throughout the website.

Buttons

Different buttons used throughout the website

Primary

Button Text

Light

Button Text

Outline

Button Text

Small Primary

Button Text

Small Light

Button Text

Small Outline

Button Text

Columns

The 12 column grid system. Easy to align section across different screen sizes. e.g. a desk-3 column spreads across 3 columns on desktop; thus it has a width of 25% as there can be 4 of these columns next to each other

1 Col

2 Col

3 Col

4 Col

5 Col

6 Col

7 Col

8 Col

9 Col

10 Col

11 Col

12 Col

Grids

Different grids. On mobile max. 2 columns next to each other!

4 Grid

3 Grid

2 Grid

2-1 Grid

1-2 Grid

Spacers

Using the 8pt-system.

16 px

24 px

32 px

48 px

64 px

80 px

96 px

128 px

Text Boxes

Maximum width for text boxes to use throughout the website

400 px

500 px

600 px

700 px

800 px

Icons

Add all icons you're going to use here. Link where you got them from to make sure you can find them again if necessary.

Forms

All form elements

Thank you! Your submission has been received!