Style guide

This style guide contains shows the styling of html components used on this website, as well as the colors. Change the styles as you like, and the rest of the website components will be adjusted accordingly.

Backgrounds

Background Classes

These classes can be used to style the backgrounds of components in the website. The colors are picked from the brand colors above (those should be chosen first).

Colors

Brand Colors

Use color swatches to edit these colors

Shades of brand color

Use color swatches to edit these colors

Shades of Grey

Use color swatches to edit these colors

Typography

This is a Heading

This is a Large Heading

This is a Small Heading

This is an Extra Small Heading

Text

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.

Text Large

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.

Text Small

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.

Text Bold

This text is bold

Text Grey

This text is grey. The class Text Grey can be used for text and headings.

Text Uppercase

This text is uppercase. the class text uppercase can be used for text and headings.

Text White

This text is white. The class Text White can be used for text and headings.

Blog

Paragraph inside rich text

H2 Headings inside rich text

H3 Headings inside rich text

H4 Headings inside rich text

Dit is een quote met een link

Dit is een quote met een link

Links

Buttons

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Columns

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

2 Grid

3 Grid

4 Grid

1-2 Grid

2-1 Grid

Spacers

120px

60px

40px

20px

10px

Icons

Alignments

Align Center

Align Center on Tablet (and smaller)

Align Center on Mobile

Align Left

Align Right