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.

Colors

Brand Colors

Use color swatches to edit these colors

Shades of brand color

Use color swatches to edit these colors

Typography

This is a heading

This is a medium 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 Uppercase

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

Text Grey

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

Text green

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

Text White

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

Rich Text

This is a H1 Heading

This is a H2 Heading

This is a H3 Heading

This is a H4 Heading

This is a H5 Heading
This is a H6 Heading

Paragraph

This is a paragraph. You can make some parts bold, or italic. It is also possible to add a link to a paragraph inside a rich text element.

Unordered List

  • First item of an unordered list
  • Second item of an unordered list
  • Third item of an unordered lis

Ordered List

  1. First item of an ordered list
  2. Second item of an ordered list
  3. Third item of an ordered list

Block Quote

This is a Block Quote. You can create a Block Quote by adding a paragraph inside a rich text element and then convert it.

Figure and Figure Caption

Image that says Create Something
This is an image with a Caption inside a richt text element

Links

Buttons

Button

Button

Open

Button

Forms

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

Alignments

Align Center

Align Center on Tablet (and smaller)

Align Center on Mobile

Align Left

Align Right