Typography

To adjust stylings for tablet or mobile screen only please read this first.

Heading sizes

All heading sizes are already styled, but you can override these styles by giving them a specific style name. This makes it possible to have an H1 headline look like an H2 or like plain text.

Plain text sizes

Every page is styled in such a way that it gives a plain text element the standard stylings used for plain text paragraphs. To make changes to this we have the following styles predefined.
heading-XL
All H1 Headings

Heading-XL

H1 Heading

heading-L
All H2 Headings

Heading-L

H2 Heading

text-XL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor.
heading-M
All H3 Headings

Heading-M

H3 Heading

text-L
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit
heading-S
All H4 Headings

Heading-S

H4 Heading

text-M
Body (all pages)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
heading-XS
All H5 Headings
Heading-XS
H5 Heading
text-S
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et consectetur. In arcu
heading-XXS
All H6 Headings
Heading-XXS
H6 Heading
text-XS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et consectetur. In arcu ligula, malesuada sit amet ipsum

Text alignment

text-left
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et

Text weight

text-regular
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-semi-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-bold
All Bolds
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et

Text options

Underline is only to be used to give more attention to a link. And caps are only to be used on rare occasions where a small headline deserves more attention.
text-caps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-underline
All Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et
text-no-underline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et

Text components

All Paragraphs

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.

All Block Quotes
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.
All Unordered Lists
All List Items
  • 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.
All Ordered Lists
All List Items
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. 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.
  3. Nunc ut sem vitae risus tristique posuere.
text-truncate

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. 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-no-break

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.

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings
  • The rich text element allows you to create and format headings
  • The rich text element allows you to create and format headings
  1. The rich text element allows you to create and format headings
  2. The rich text element allows you to create and format headings
  3. The rich text element allows you to create and format headings

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
This is a placeholder image.