Style Guide

Style guide page contains styles and components used through the template.
You can change any style or color from this page and it will be applied for the whole template.

HTML Headings

typography
All H1 Headings

Heading one

All H2 Headings

Heading two

All H3 Headings

Heading three

All H4 Headings

Heading four

All H5 Headings
Heading five
All H6 Headings
Heading six

Heading Classes

typography
Heading Style H1

Heading Style H1

Heading Style H2

Heading Style H2

Heading Style H3

Heading Style H3

Heading Style H4

Heading Style H4

Heading Style H5

Heading Style H5

Heading Style H6

Heading Style H6

HTML Classes

typography
all paragraph

The quick brown fox jumps over the lazy dog text design

all links
Text Link
all quotes
Block Quote
All Unordered Lists

  • Unordered list

  • Unordered list

All Ordered Lists

  1. Unordered list

  2. Unordered list

Text Classes

typography
Text Size Large

The quick brown fox jumps over the lazy dog text design

Text Size Medium

The quick brown fox jumps over the lazy dog text design

Text Size Small

The quick brown fox jumps over the lazy dog text design

Text Size XSmall

The quick brown fox jumps over the lazy dog text design

Text Style Allcaps

The quick brown fox jumps over the lazy dog text design

Text Weight Semibold

The quick brown fox jumps over the lazy dog text design

Text Align Left

The quick brown fox jumps over the lazy dog text design

Text Align Center

The quick brown fox jumps over the lazy dog text design

Text Align Right

The quick brown fox jumps over the lazy dog text design

Text Colors

colors
Text Color Grey
The quick brown fox jumps over the lazy dog text design
Text Color Primary
The quick brown fox jumps over the lazy dog text design
Text Color White
The quick brown fox jumps over the lazy dog text design

Background Colors

colors
Background Color Black
Background Color Grey
Background Color White

Color Palette

colors
Grey 800
Grey 600
Grey 400
Grey 200
Grey 100
Primary 600
Primary 200

Buttons

components
Button
Button
Button
Secondary
Button
Button
Icon
Button ->
Button
Small
Button
Button
White
Small
Button
Button
White

Form

components
form_component
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text

components
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Icons

1x1
Icon Small
Icon Medium
Icon Large

Structure Classes

containers
Page Wrapper
Main Wrapper
Padding Global
Container Large
Container Medium
Container Small
Padding Section Large
Padding Section Medium
Padding Section Small
Button Wrapper

Max-widths

containers
Max Width Large
Max Width Medium
Max Width Small

Spacers

containers
Spacer XLarge
Spacer Large
Spacer Medium
Spacer Small
Spacer XSmall