HTML
HTML Heading TagsOther HTML Tags
Text
Heading StylesText SizesText WeightsText AlignmentsText Styles
Colors
Text ColorsBackground Colors
Components
ButtonsWebflow Elements
Other
Structure ClassesUtility ClassesSpacer

Style Guide

HTML Heading Tags

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H3

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H4

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
H6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Other HTML Tags

All Paragraphs

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.

All Links
Text Link
All Quotes
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.
All Ordered Lists
  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.
All Unordered Lists
  • 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.

Heading Styles

Heading 1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading 2

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading 3

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading 4

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading 5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading 6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Text Sizes

Text Size Large
Sample text is being used as a placeholder for real text that is normally present.
Text Size Medium
Sample text is being used as a placeholder for real text that is normally present.
Text Size Regular
Sample text is being used as a placeholder for real text that is normally present.
Text Size Small
Sample text is being used as a placeholder for real text that is normally present.
Text Size Tiny
Sample text is being used as a placeholder for real text that is normally present.

Text Weights

Text Weight Light
Text Weight Light
Text Weight Regular
Text Weight Regular
Text Weight Medium
Text Weight Medium
Text Weight Semibold
Text Weight Semibold
Text Weight Bold
Text Weight Bold
Text Weight XBold
Text Weight XBold

Text Alignments

Text Align Left
Text Align Left
Text Align Center
Text Align Center
Text Align Right
Text Align Right

Text Styles

Text Style Muted
Text Style Muted
Text Style Underline
Text Style Underline
Text Style Strikethrough
Text Style Strikethrough
Text Style Allcaps
Text Style Allcaps
Text Style Italic
Text Style Italic

Text Colors

Text Color White
Text Color White
Text Color Black
Text Color Black
Text Color Grey
Text Color Grey

Background Colors

BG Color White
BG Color Black
BG Color Grey

Buttons

Button
Button Text
Button Primary
Small
Button Text
Button Primary
Large
Button Text
Button
Outline
Button Text
Button Primary
Icon
Button Text

Webflow Elements

Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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.

‍

Structure Classes

Page Wrapper
Main
Button Group
Container Large
Container Medium
Container Small
Padding Large
Padding Section Medium
Padding Section Small

Utility Classes

Overflow Visible
Overflow Hidden
Overflow Scroll
Overflow Auto
No X padding
No Y padding
Align Center
Class
Hide
Hide Tab
Hide Mobile Landscape
Hide Mobile Portrait
Icon 1x1 Small
Icon 1x1 Medium
Icon 1x1 Large

Spacer

Spacer
Tiny
Spacer
XXSmall
Spacer
XSmall
Spacer
Small
Spacer
Medium
Spacer
Large
Spacer
XLarge
Spacer
XXLarge
Spacer
Huge
Spacer
XHuge
Spacer
XXHuge