Style guide

Typography

Heading tags

All Heading H1

Heading H1

All Heading H2

Heading H2

All Heading H3

Heading H3

All Heading H4

Heading H4

All Heading H5

Heading H5

All Heading H6

Heading H6

Heading classes

heading-style-h1

heading-style-h2

heading-style-h3

heading-style-h4

heading-style-h5

heading-style-h6

Text classes

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 links

Link

All block quotes

Block Quote

text-style-xlarge

text-style-large

text-style-default

text-style-small

text-style-xsmall

text-uppercase

Lorem ipsum dolor sit amet.

text-capitalize

Lorem ipsum dolor sit amet.

text-italic

Lorem ipsum dolor sit amet.

text-underline

Lorem ipsum dolor sit amet.

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Text line clamp

text-clamp-1

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

text-clamp-2

text-clamp-3

text-clamp-4

List styling

All unordered lists

List item 1
List item 2
List item 3

All ordered lists

List item 1
List item 2
List item 3

Color

theme-base

Heading

theme-secondary

Heading

Form

Form / Block

Form / Label

Label

Form / Input

Form / Text area

Form / Select

Form / Policy checkbox

I consent to the processing of my personal data in accordance
with your privacy policy.

Core structure classes

padding-global

container

grid-main

container-tablet

container-mobile

Section spacers

Buttons

button

theme-primary

button

theme-secondary

Icons

Miscellaneous

is-hidden

is-relative

full-width

full-height

sr-only