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 a H1 headline looking like a H2 or even 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

default h1

Heading-XL

text-XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in

heading-L

default h2

Heading-L

text-XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor.

heading-M

default h3

Heading-M

text-L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit

heading-S

default h4

Heading-S

text-M

default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et

heading-XS

default h5

Heading-XS

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

default h6

Heading-XXS

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-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et

text-bold

default bold/strong

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 in 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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida quam quis erat gravida auctor. Vestibulum blandit pretium sapien et

Text components

<a>

All links

<p>

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.

<ul>

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.

<ol>

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.

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

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.