Structure
Preview
page-wrapper

Outermost parent of all elements on the page. This Div Block wraps every element on the page.

main-wrapper

The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.

padding-global

Global horizontal spacing. This class manages the left and right padding of a page's content.

Instructions
Core

Use these classes to check the core structure elements for all pages.

A copy has intentionally been added beneath each element to provide more context.

Preview
container-small
container-medium
container-large
Instructions
Containers

A unified global container system for content on the page. All, or most, page content can go inside the container- class.

Preview
max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full-mobile
max-width-full-tablet
max-width-full
Instructions
Max Width

Use container- classes for the primary outer content max width. Use max-width- classes for max width use cases nested within the container-.

Typography
Preview
H1
All H1 Headings
heading-style-h1

H1 HTML tag*

H1 text block*

Placeholder paragraph copy has intentionally been added here to provide real-world context.

H2
All H2 Headings
heading-style-h2

H2 HTML tag*

H2 text block*

Placeholder paragraph copy has intentionally been added here to provide real-world context.

H3
All H3 Headings
heading-style-h3

H3 HTML tag*

H3 text block*

Placeholder paragraph copy has intentionally been added here to provide real-world context.

H4
All H4 Headings
heading-style-h4

H4 HTML tag*

H4 text block*

Placeholder paragraph copy has intentionally been added here to provide real-world context.

H5
All H5 Headings
heading-style-h5
H5 HTML tag*
H5 text block*

Placeholder paragraph copy has intentionally been added here to provide real-world context.

H6
All H6 Headings
heading-style-h6
H6 HTML tag*
H6 text block*

Placeholder paragraph copy has intentionally been added here to provide real-world context.

Instructions
Headings

Use the panel on the right to adjust the size, leading and tracking of your heading styles.

Placeholder paragraph copy has intentionally been added beneath each heading to provide real-world context.

Preview
Xhuge
text-size-xhuge
Sample text is being used as a placeholder.
Huge
text-size-huge
Sample text is being used as a placeholder.
Large
text-size-large
Sample text is being used as a placeholder.
Medium
text-size-medium
Sample text is being used as a placeholder.
Small
text-size-small
Sample text is being used as a placeholder.
Tiny
text-size-tiny
Sample text is being used as a placeholder.
Instructions
Text sizes

Use these classes to set the size of texts.

Preview
Extra bold
text-weight-xbold
Sample text is being used as a placeholder.
Bold
text-weight-bold
Sample text is being used as a placeholder.
Semibold
text-weight-semibold
Sample text is being used as a placeholder.
Medium
text-weight-medium
Sample text is being used as a placeholder.
Normal
text-weight-normal
Sample text is being used as a placeholder.
Light
text-weight-light
Sample text is being used as a placeholder.
Instructions
Text weights

Use these classes to set the font weight for your texts.

Preview
Left
text-align-left
Sample text is being used as a placeholder.
Center
text-align-center
Sample text is being used as a placeholder.
Right
text-align-right
Sample text is being used as a placeholder.
Instructions
Text alignments

Use these classes to align your texts. If necessary, create combo classes to change the text alignment on other breakpoints.

Preview
underline
text-style-underline
Sample text is being used as a placeholder.
strikethrough
text-style-strikethrough
Sample text is being used as a placeholder.
Italic
text-style-italic
Sample text is being used as a placeholder.
All caps
text-style-allcaps
Sample text is being used as a placeholder.
No wrap
text-style-nowrap
Sample text is being used as a placeholder.
lore ipsum
lore-ipsum
Sample text is being used as a placeholder.
Instructions
Text styles

Use these classes to set standard styles to your texts and also create new custom text styles.

Preview
Paragraph
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.

Link
All Links
Text Link
Block Quote
All Block 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.
List*
All Unordered Lists
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
List*
All Ordered Lists
  1. Sample text is being used as a placeholder.
  2. Sample text is being used as a placeholder.
  3. Sample text is being used as a placeholder.
Instructions
Other text elements

Use the panel on the right to adjust the size, leading and tracking other text elements.

Preview
rich-text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Caption text
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  • Sample text is being used as a placeholder.
  1. Sample text is being used as a placeholder.
  2. Sample text is being used as a placeholder.
  3. Sample text is being used as a placeholder.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Instructions
Rich Text

Use the panel on the right to adjust the size, leading and tracking the main rich text element.

Colors
Preview
Primary
Color 1
background-color-black
Aa
text-color-black
Color 2
background-color-white
Aa
text-color-white
Color 5
background-color-blue
Aa
text-color-blue
Instructions
Background and text colors

Use the panel on the right to adjust the size, leading and tracking the colors across the project.

Spacing
We are testing simpler spacing system different from Client-first.
Add the spacing div and change the height if you need.
Preview
spacing-block-tiny
spacing-block-xxsmall
spacing-block-xsmall
spacing-block-custom1
spacing-block-small
spacing-block-custom2
spacing-block-custom3
spacing-block-custom4
spacing-block-medium
spacing-block-custom5
spacing-block-large
spacing-block-xlarge
spacing-block-xxlarge
spacing-block-huge
spacing-block-xhuge
spacing-block-xxhuge
Instructions
Blocks

Use these blocks to create spacing between the elements.

Preview
spacing-section-xsmall
spacing-section-small
spacing-section-medium
spacing-section-large
spacing-section-xlarge
spacing-section-xxlarge
spacing-section-huge
Instructions
Sections

Use these blocks to create top and bottom spacing for the sections.

Utility
Preview
Hide
hide
Hide element for all resolutions
Element is hidden for all breakpoints.
Hide (tablet)
hide-tablet
Hide element starting from tablet resolution.
Element is hidden for tablet and mobile breakpoints.
Hide (mobile)
hide-mobile
Hide element starting from mobile resolution.
Element is hidden for mobile breakpoints.
Instructions
Visibility

Use these classes to hide elements for specific breakpoints.

Preview
Block
display-block
Sets display:block at the base desktop breakpoint.
Flex
display-flex
Sets  display:flex at the base desktop breakpoint.
Inline Block
display-inlineblock
Sets display:inlineblock at the base desktop breakpoint.
Inline
display-inline
Sets display:inline at the base desktop breakpoint
Instructions
Layout

Use these classes to change and set display properties to elements.

Preview
Overflow Visible
overflow-visible
Sets overflow to visible.
Overflow Hidden
overflow-hidden
Sets overflow to hidden.
Overflow Scroll
overflow-scroll
Sets overflow to scroll.
Overflow Auto
overflow-auto
Sets overflow to hidden.
z-Index
z-index-1
Set position to relative and z-Index to 1.
z-Index
z-index-2
Set position to relative and z-Index to 2.
Align center
align-center
Center element using margin.
Instructions
Others

Use these classes to change and set display properties to elements.

Elements
Preview
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Instructions
Form

Native Webflow elements with Client-First classes applied.

Preview
Small
button
is-small
Button Text
Medium (base)
button
Button Text
Large
button
is-large
Button Text
Dark
button
is-large
Instructions
Buttons

Buttons elements and all its variations.