Style Guide

Edit the following Elements directly in this Style Guide. All changes will be reflected across the Website. This Website uses the Client-First Naming Conventions by Finsweet.

Typography

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

Heading Classes

This is an H1 Heading

heading-style-h1

This is an H2 Heading

heading-style-h2

This is an H3 Heading

heading-style-h3

This is an H4 Heading

heading-style-h4
This is an H5 Heading
heading-style-h5
This is an H6 Heading
heading-style-h6
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.

Text Alignment
text-align-center

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

text-align-left

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

text-align-right

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 800
neutral 700
neutral 600
neutral 500
neutral 400
neutral 300
neutral 200
neutral 100
Brand Colors
primary
primary hover
primary light

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.

is-small
Button Text
is-large
Button Text
is-secondary
Button Text

Icons

To keep all Icons consistent across the Website we used the following classes to set their sizes. Icon-height changes only the height of the icon, while icon-1x1 changes both the width and the height.

icon-1x1-large
icon-1x1-medium
icon-1x1-small
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large

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.

UI Elements

Here you can find the core UI Elements used across the Site.

card
Small
Large

Grids

This Website uses CSS Grids to create different Layouts. The following Grid Classes are fully responsive and look great across all Breakpoints.

grid-4col
grid-3col
grid-2col
grid-2-1col
grid-1-2col
grid-1col