Style Guide

This is the Style Guide. Here you can find all the Classes & Colors used across the Website.

Typography

In this Section you can find all the Text Styles used across the Site. These Classes only change the Font Weight, Font Size & Font Height. To change the Class add one of the Global Combo Classes listet below to it.

Headings

Extra Extra Large Text

Heading

Extra Large Text

Heading

Large Text

Heading

Medium Text

Heading

Normal Text

Heading

Small Text

Heading

Extra Small Text

Heading

Extra Extra Small Text

Heading

Links

Rich Text

In this Section of the Style Guide you can edit all the Elements of the Rich Text Element.

Heading H1

This is an H1 Heading inside a Rich Text.

Heading H2

This is an H2 Heading inside a Rich Text.

Heading H3

This is an H3 Heading inside a Rich Text.

Heading H4

This is an H4 Heading inside a Rich Text.

Heading H5
This is an H5 Heading inside a Rich Text.
Heading H6
This is an H6 Heading inside a Rich Text.
Paragraph

This is the Normal Paragraph Text inside of a Rich Text Element.

Bold

This is an Bold Text inside a Rich Text Element.

Italic

This is an Italic Text inside a Rich Text Element.

Quote
This is a Quote inside of a Rich Text Element.
Image
This is an Image Caption inside a Rich Text Element

Colors

Here you can find all the Colors used in this Template.

Neutral Colors
Neutral 100
#ECEEF2
Neutral 200
#D5D9E2
Neutral 300
#B0B8C9
Neutral 400
#8591AB
Neutral 500
#667491
Neutral 600
#515C78
Neutral 700
#424B62
Neutral 800
#3A4152
Neutral 900
#333847
Accent Colors
Primary 500
#9967FF
Additional Colors
Orange
#FF881E
Purple
#7265E8
Green
#25A478
Yellow
#FDF984
Background Colors
BG 700
#121723
BG 500
#191F2D
BG 400
#2A3346
System Colors
Success 400
#338637
Success 300
#43a448
Success 200
#9bda9e
Success 100
#f3faf3
Error 400
#fd3636
Error 300
#ff5757
Error 200
#ff9494
Error 100
#fff0f0

Columns

This Template uses a 12 Column Flexbox Layout to allow for complete control and flexibility when it comes to creating & editing Sections.

1 Column
2 Columns
3 Columns
4 Columns
5 Columns
6 Columns
7 Columns
8 Columns
9 Columns
10 Columns
11 Columns
12 Columns

Grids

These are the Basic Grids that are or can be used to create different Layouts in the Template.

Buttons

Here you can find all the Buttons and their respective Classes.

Primary Buttons
Button - Small
Small
Button
Default
Button - Large
Large
Secondary Buttons
Button - Small
Small
Button
Default
Button - Large
Large

Drop Shadows

In this Section you can find a Collection of Global Combo Classes that can be applied to any Element to add consistent Drop Shadows.

Drop Shadow 01
Drop Shadow 02

Badges / Labels

In this Section you can find a Variety of different Badges & Labels that are used to give the Visitor of the Website more Information about the Card or Element they are looking at. For example: Product & Blog Categories

Primary Badge
Small
Default
Large
Secondary Badge
Small
Default
Large

Forms

Here you can find all the Form Elements used in this Template.

Input Fields
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Dropdown
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Areas
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkboxes & Radio Buttons
Checkbox Small
Checkbox Normal
Checkbox Large
Radio Button Small
Radio Button Normal
Radio Button Large
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Tabs

Here you can find the Tab Elements used in this Template.