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

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.

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

Item 1
Item 2
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

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

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

black

white

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.

Button Primary

Get Started

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

UI Elements

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

card

This is a Card Heading

card animation

This is a Card Heading

Animation Classes

Here you can find a set of animation combo classes that makes applying consistent Interactions easier than ever before. Simply wrap what you animate into a new div or add the combo class to an already existing element and the animation will be applied automatically.

scroll-into-view-0.2s

scroll-into-view-0.4s

scroll-into-view-0.6s

scroll-into-view-0.8s

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