Skip to content

Styleguide

Sections

Styleguide





Colours




Primary

Secondary

Tertiary

Quaternary

Grey Dark

Grey

Grey Light

Validation Error

Validation Success





Typography




Heading H0
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Heading H1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Heading H2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Heading H3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Heading H4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Heading H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Heading H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: DM Sans Medium | Line height: 105% | Letter spacing: Normal



Content Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: DM Sans Medium | Line height: 160% | Letter spacing: Normal



Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: DM Sans Medium | Line height: 160% | Letter spacing: Normal



Content Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: DM Sans Medium | Line height: 160% | Letter spacing: Normal



Content Extra Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Font: DM Sans Medium | Line height: 160% | Letter spacing: Normal




Buttons








Form




This is a form
Radio field
Checkbox field

Error message

  • Error message list item
  • Error message list item

Success message

  • Success message list item
  • Success message list item




Space




xs
s
m
l
xl
2xl
3xl
4xl
5xl




CMS Content





H1 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

H5 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a.

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important
  1. This is a list item in an ordered list
  2. An ordered list is a list in where the sequence of items is important

Bold text

Italic text

Anchor link

This text contains subscript text.

This text contains superscript text.