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

text-XXL

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

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

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

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

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

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

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.