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 Weights
text-weight-xbold

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

text-weight-bold

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

text-weight-semibold

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

text-weight-medium

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

text-weight-normal

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

text-weight-light

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

Text Styles
text-style-strikethrough

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

text-style-quote

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

text-style-muted

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

text-style-link
text-style-underline

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

text-style-italic

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

text-style-allcaps

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 Darkest
Neutral Darker
Neutral Dark
Neutral
Neutral Light
Neutral Lighter
Neutral Lightest
Brand Colors
primary
primary hover

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
is-tertiary
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-height-large
icon-height-medium
icon-height-small
icon-1x1-large
icon-1x1-medium
icon-1x1-small
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge

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.

Shadows

Here you can find a selection of drop shadow combo classes that can be applied to any element on the website.

is-shadow-xxsmall
is-shadow-xsmall
is-shadow-small
is-shadow-medium
is-shadow-large
is-shadow-xlarge
is-shadow-xxlarge

Sections

Here you can find Classes for differently sized Sections. To change the size of an individual section, add one of the following combo classes to the section class. Example: section padding-section-large

padding-section-large
padding-section-medium
padding-section-small

Containers

Here you can find Classes for differently sized Containers. To change the size of an individual container, add one of the following combo classes to the container class. Example: container container-large

container-large
container-medium
container-small

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

Spacers

Spacers are used across the Website to increase the space between 2 Elements. Utilizing these Classes helps in keeping the Spacing consistent throughout the Project.

spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge

Padding Classes

The Padding Classes consist of 2 pieces. The Main padding-[Direction] and the padding-[size]. Find all available padding sizes below.

Direction Classes
padding-bottom
padding-top
padding-left
padding-right
padding-horizontal
padding-vertical
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge

Margin Classes

The Margin Classes consist of 2 pieces. The Main margin-[direction] and the margin-[size]. Find all available padding sizes below.

Direction Classes
margin-bottom
margin-top
margin-left
margin-right
margin-horizontal
margin-vertical
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge