Styleguide

Styleguide is a set of guidelines and strategies created to help you build Webflow websites.

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

All H1 Headings

H1

heading-style-h1

H1

All H2 Headings

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

heading-style-h2

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

All H3 Headings

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

heading-style-h3

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

All H4 Headings

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

heading-style-h4

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

All H5 Headings
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h5

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

All H6 Headings
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h6

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

Other HTML Tags

HTML tags define default text styles.

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
Text Link
All Block Quotes
Block Quote
All Unordered Lists

  • List Item

  • List Item

  • List Item

All Ordered Lists

  1. List Item

  2. List Item

  3. List Item

Text Sizes

Text sizes when typography style doesn't match the default HTML tag.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-eyebrow

Eyebrow

Text Weights

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Text Styles

text-style-italic

text-style-italic

text-style-strikethrough

text-style-strikethrough

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-inlinelink

text-style-link

Text Alignment

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

Rich Text

text-align-left

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Background Colors

Manage recurring background colors.

background-color-black
background-color-white
background-color-green
background-color-darkgrey
background-color-lightgrey

Text Colors

Manage recurring text colors.

text-color-white
text-color-white
text-color-black
text-color-black
text-color-darkgrey
text-color-darkgrey
text-color-lightgrey
text-color-darkgrey
text-color-green
text-color-green

Buttons

Button combo class system.

Button Sizes

button
Button
button
is-small
Button

Button Variants

button
is-secondary
Button
button
is-link
Button

Form Elements

All different form elements

field-label
form-input
field-label
form-input
form-input
is-text-area
form-input
ís-text-area
form-checkbox
form-radio
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icons

Unify icons sizes.

icon-16
icon-20
icon-24
icon-32
icon-40
icon-48
icon-56

Structure

Defined and flexible core structure we can use on all or most pages.

page-wrapper
main-wrapper
padding-global
container-large
container-medium
container-small

sHADOWS

Utility shadows mostly used on different cards

hide

Utility Classes

Utility classes we like to use in most of our projects to build faster.

hide
hide-tablet
hide-landscape
hide-portrait
show-tablet
show-landscape
show-portrait
z-index-1
z-index-2
z-index-3
opacity-80
opacity-60
opacity-40
opacity-20
img-cover

Words ClassES

Utility classes to animate each word on scroll to view.

is-word
is-1
is-word
is-2
is-word
is-3
is-word
is-4
is-word
is-5
is-word
is-6
is-word
is-7
is-word
is-8
is-word
is-9
is-word
is-10
is-word
is-11
is-word
is-12

Margins

Unified spacer system for the project.

margin-bottom-4
margin-bottom-8
margin-bottom-12
margin-bottom-16
margin-bottom-20
margin-bottom-24
margin-bottom-28
margin-bottom-32
margin-bottom-40
margin-bottom-48
margin-bottom-56
margin-bottom-64
margin-bottom-72
margin-bottom-80
margin-bottom-96
margin-bottom-104
margin-bottom-120
margin-bottom-144
margin-top-4
margin-top-8
margin-top-12
margin-top-16
margin-top-20
margin-top-24
margin-top-28
margin-top-32
margin-top-40
margin-top-48
margin-top-56
margin-top-64
margin-top-72
margin-top-80
margin-top-96
margin-top-104
margin-top-120
margin-top-144