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
#e3e4e4
Neutral 200
#c6c9c8
Neutral 300
#a2a6a5
Neutral 400
#7f8282
Neutral 500
#646867
Neutral 600
#4f5252
Neutral 700
#414444
Neutral 800
#363938
Neutral 900
#303131
Accent Colors
Primary 500
#68C3F2
Primary 200
#DDF1FC
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
Button - Small
Small
Button
Default
Button - Large
Large
Secondary Buttons
Button - Small
Small
Button
Default
Button - Large
Large
Icon Button - Primary
Icon Button - Small
Icon Button
Icon Button - Large
Icon Button Text- Small
Default
Icon Button Text
Default
Icon Button Text- Large
Default
Icon Button - Secondary
Icon Button - Small
Icon Button
Icon Button - Large
Icon Button Text- Small
Default
Icon Button Text
Default
Icon Button Text- Large
Default
Download Buttons
Button Download - Google Play
Google Play
Button Download - App Store
App Store

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
Shadow 02
Shadow 03
Shadow 04

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
Small
Default
Large
Secondary Badge
Small
Default
Large
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.

Category Tags

Here you can find the Category Tag Template that's used to sort through the different CMS Categories.

Explore more premium Webflow Templates
Customize this Template with a Webflow Professional Partner!