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

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.

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.

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.

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.

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.

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

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

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

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

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

text-color-1

Color 2

background-color-2

text-color-2

Color 3

background-color-3

text-color-3

Color 4

background-color-4

text-color-4

Color 5

background-color-5

text-color-5

Secondary

Color 6

background-color-6

text-color-6

Color 7

background-color-7

text-color-7

Color 8

background-color-8

text-color-8

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

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-dark

Button Text

Light

button

is-light

Button Text

Secondary

button

is-secondary

Button Text

Instructions

Buttons

Buttons elements and all its variations.