Typography

The different text sizes used throughout the site.

PRE-header

This is some text inside of a div block.

Pre-header

h1

H1 header

h2

H2 header

h3

H3 header standaard

H3 header 20px

H3 header 18px

H3 header 16px

H3 header 14px

h4

H4 header

h5

H5 header

h6

H6 header

Paragraph

Paragraaf standaard (pas deze aan)

24px - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

20px - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

18px - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

16px - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

14px - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

12px - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab px

Mob px

Weight

Thin

Extra light

Light

Normal

Medium

Semi-bold

Bold

Extra bold

Black

Quote

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
All buttons now have tooltips
Spell checker number issue fixed

Link

More about me

Figure with caption

Colors

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

Buttons

The different types of buttons used throughout the website.

Knop tekst

Grids

Different grid layouts to use across your site

Grid

Grid 2-1

Grid 1-2

Grid 3

Grid 4

Grid 1

grid ; tab 1

Grid ; tab 2

grid ; tab 3

grid ; tab 4

grid ; Mob 1

grid ; Mob 2

grid ; Mob 3

grid ; Mob 4

grid ; Gap 72

grid ; Gap 64

grid ; Gap 56

grid ; Gap 48

grid ; Gap 40

grid ; Gap 32

grid ; Gap 24

grid ; Gap 16

grid ; Gap 8

grid ; Tab gap

grid ; Mob gap

grid ; row 72

grid ; row 64

grid ; row 56

grid ; row 48

grid ; row 40

grid ; row 32

grid ; row 24

grid ; row 16

grid ; row 12

grid ; row 8

grid ; row 4

grid ; Tab row

grid ; mob row

Div

The 12 column grid system to make it easy to align sections across different screen sizes.

Content holder

Content holder ; horizontal

Content holder ; Allign start/center/end

Normal

Content holder ; Justify start/center/end/space between/space around

Normal

Show / hide

Normal

Content holder ; ...px

Content holder ; Gap ...

Columns

The 12 column grid system to make it easy to align sections across different screen sizes.

1 Col

2 Col

3 Col

4 Col

5 Col

6 Col

7 Col

8 Col

9 Col

10 Col

11 Col

12 Col

Rich Text

Formatted rich text element used for long sections of text such as blog posts.

This is a Header.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.