Webflow

Style Guide

christineschmid.com

HTML Heading Tags

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

H4
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.

H5
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.

H6
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.

Heading Classes Overrides

heading-jumbo

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

Fake Heading Classes

heading-jumbo

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

Fake Heading Classes Body Text

heading-jumbo

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

SubHeading Classes

Text Style Subheader (H2)

Text Style Subheader (Text)

Text Style Subheader (Simple)

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

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. Sample text is being used as a placeholder for real text.

Text Classes

text-size-large
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.

text-size-medium
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.

text-size-regular
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.

text-size-small
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.

text-size-tiny
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.

text-style-italic

text-style-strikethrough

text-style-underline

text-style-allcaps

text-style-muted

text-style-nowrap

break-word

font-alternative (system-ui) (eg. for special characters like → ©)

text-style-link

text-style-link-fancy

text-style-quote
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.

text-style-2lines
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.

text-style-3lines
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.dolor sit amet,

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Flex Alignments

flex-vertical-center

Heading 2

This is some text inside of a div block.

button

flex-horizontal-center

button

flex-column

flex-row

flex-row-centered

flex-wrapper

Text Colors

text-color-black

text-color-grey

text-color-white

text-color-primary

text-color-secondary

text-shadow

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

The rich text element allows you to create and format headings
The rich text element allows you to create and format headings
The rich text element allows you to create and format headings

The rich text element allows you to create and format headings
The rich text element allows you to create and format headings
The rich text element allows you to create and format headings

This is a link

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.

This is an image caption

Rich Text // Sweet Text
(experimental)

<text-align-center>

<h2-center-text>

Color Palette

Primary

Brand

Text Color

Background1

BG1

Background2

BG2

Others

Invert (Black)

Buttons

button

button-secondary

Backgrounds

Icons Sizes

Icons 1x1 Sizes

Social Media Icons

Webflow Elements

List

Ordered

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.

Unordered

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.

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Webflow

Style Guide

H1Sample text is being used as a placeholder.

H2Sample text is being used as a placeholder as real text.

H3Sample text helps you understand how real text may look on your website.

H4Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

H5Sample 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.

H6Sample 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.

heading-jumbo

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

Text Style Subheader (H2)

Heading 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

List

Ordered

Unordered

Form

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

H4
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.

H5
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.

H6
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.