style guide

Typography

Font Styles

H1

Heading-1

H2

Heading-2

H3

Heading-3

H4

Heading-4

heading-h1

Lorem ipsum

heading-h1 accent

Lorem ipsum

heading-h2

Lorem ipsum

heading-h2 accent

Lorem ipsum

heading-h3

Lorem ipsum

heading-h3 accent

Lorem ipsum

title-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

title-m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

title-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

body-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

body-m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

body-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

label-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

label-m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

label-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Font family

heading-regular
This is some text inside of a div block.
heading-accent
This is some text inside of a div block.
heading-regular
This is some text inside of a div block.

Font weight

font-weight-regular
This is some text inside of a div block.
font-weight-medium
This is some text inside of a div block.
font-weight-bold
This is some text inside of a div block.

line height

line-height-90
This is some text inside of a div block.
line-height-100
This is some text inside of a div block.
line-height-144
This is some text inside of a div block.

text colors

color-opacity-0.5
This is some text inside of a div block.
text-color-secondary
This is some text inside of a div block.

Base icons

link

link

Buttons & links

Links

Nav link

link

link

Dropdown toggle link

Nav Toggle link

Dropdown list link

Nav dropdown link

Footer link

Footer link

buttons

Button / Gradient

Button

button-primary__dark

Button

button-primary__dark.is-icon

Button

button-secondary__dark

Button

button-primary__light

Button

button-primary__light.is-icon

Button

button-secondary__light

Button

Components

Logos

logo

navigation

header
footer

forms

popup-contact
form
Title
Dropdown
Thank you! Your submission has been sent!
Close
Oops! Something went wrong while submitting the form.
Popup Get Materials
cta
cookies-consent