Styleguide

Typography

Find all the components needed for your website here.
H1

This is a Header.

H2

This is a Header.

H3

This is a Header.

H4

This is a Header.

H5
This is a Header.
H6
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

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.

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

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
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!

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.

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.