Style Guide

Edit the following Elements directly in this Style Guide. All changes will be reflected across the Website.

Typography

Here you can find all the Typography Classes and HTML Tags that are used in this Website.

Heading Classes

This is a Display 1 Heading

Display 1

This is a Display 2 Heading

Display 2

This is a Display 3 Heading

Display 3
HTML Tags

This is an H1 Heading

All H1 Headings

This is an H2 Heading

All H2 Headings

This is an H3 Heading

All H3 Headings

This is an H4 Heading

All H4 Headings
This is an H5 Heading
All H5 Headings
This is an H6 Heading
All H6 Headings
Other HTML Tags
All Paragraphs

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

All Quotes
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."
All Links
Text Link
All unordered Lists
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
All ordered Lists
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Text Sizes
text-size-large

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

text-size-medium

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

text-size-regular

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

text-size-small

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

text-size-tiny

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

Colors

In this Section you can find all the Colors used across the Website. To swap the Colors out with your own Brand Colors, it is recommended to do so directly in the Variables Menu (Shortcut V)

Neutral Colors
neutral 10
neutral 20
neutral 30
neutral 40
neutral 50
neutral 60
neutral 70
neutral 80
Brand Colors
Ligh Pink
Lavender
Light Purple
Blueish Purple
Light Blue

Buttons

Here you can find the different Button Styles. The "button" class is the default styling of the Buttons. To further modify each button simply add for example the "is-small" combo class to the button to turn it into a small button and so on.

Secondary
Button Text
White
Button Text

Form Elements

Here you can find and edit all the different Form Elements used across the Website.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.