Typography
HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Classes

Heading xlarge · 80px (5rem)

Heading large · 72px (4.5rem)

Heading medium · 40px (2.5rem)

Heading small · 24px (1.5rem)

Heading xsmall · 20px (1.25rem)

Other HTML Tags

All Paragraph (HTML Tag)A 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
"This is a block quote."

  • No bullet list

  • No bullet list

  1. No bullet list

  2. No bullet list

  • No bullet list

  • No bullet list

  • No bullet list

Text Sizes

text-size-large · 24px (1.5rem), template size, not in the design · 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-size-medium · 20px (1.25rem), template size, not in the design · 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-size-regular · 16px (1rem), line height 1.3 · 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-size-small · 14px (0.875rem), line height 1.05 · 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 Weights
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text Styles
text-style-italic
text-style-strikethrough
text-style-allcaps
text-style-nowrap
text-style-quote
text-style-link
text-style-2columns
text-style-2lines
text-style-3lines
text-wrap-balance
text-style-muted
Text Colors
text-color-dark
Text Alignment
text-align-left
text-align-center
text-align-right
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
"This is a block quote."

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Background Color

background-color-black

Color Variables
black/100 · #000000
black/80 · #000000 80%
black/70 · #000000 70%
black/50 · #000000 50%
black/20 · #000000 20%
white/100 · #ffffff
white/20 · #ffffff 20%
amber/100 · #ffb82e
purple/100 · #7e10ff
violet/100 · #380083
red/100 · #ff0819
blue/100 · #0037ff
magenta/100 · #f806e4
plum/100 · #7a0360
pink/100 · #ff87e1
midnight/100 · #100026
UI Elements
Buttons
Aan de slag
Navigation
Opacity
Icons

icon-xxsmall

icon-xsmall

icon-small

icon-regular

icon-large

icon-xlarge

icon-xxlarge

Form Elements
Naam*
Bericht*
Verzenden
page-content
main-wrapper
container
padding-global
padding-section