Classes

Scale your website without developers and empower your marketing team to market your brand. CSS class naming that a grandma can understand. No abbreviations, no shorthand, no confusion. Read a class name and know what it does.

Structure

We defined the core basics so you can build the complex with less effort.

Core structures and max width

Use the this structure to create most pages:

.page-wrapper

‍.section

‍.container

‍.page-padding

...(e.g. grid, layouts, components, etc.)

.container

.max-800

.max-600

.max-500

.max-400

.max-200

Global padding

Outer parent class to create global horizontal spacing site-wide

.page-padding

SOME OF THESE UTILITY CLASSES SHOULD BE MOVED. Something like clickable doesn't need to be this high up on the list of classes
‍

Utility classes

.z-1 - Bring an element closer on the z-index. Sets z-index to 1.

.z-2 - Bring an element closer on the z-index. Sets z-index to 2.

.full-size - No maximum width on a .container. Sets max-width to none.

.full-size-tablet - .full-size on tablet. Sets max-width to none on tablet.

.full-size-mobile - .full-size on mobile. Sets max-width to none on mobile.

.align-center - Centers a .container on the screen. Sets margin left and right to auto.

.div-square - Creates and maintains a 1:1 dimension of a div. CSS magic.

.layer - Add to div to make it expand the entire size of the parent element. Make sure the parent div has 'position: relative'.

.clickable-off - Prevents all click and hover interaction with an element. Sets pointer-events to none.

.clickable-on - Enables all click and hover interaction with an element. Sets pointer-events to auto.

.crop - Prevents overflow of a .container. Sets overflow to hidden.

.sticky-on-page - Required add-on to .page-wrapper when 'position: sticky' is on a page. Sets overflow to visible.

Grids

Build any layout with grids. Use it when you need columns and rows.

Grid columns

.grid-1-col

.grid-2-col

.grid-3-col

.grid-4-col

Grid rows

.grid-row

item

Add-ons to 'Grid rows'

Add these classes in addition to the 'Grid rows' classes above.

.gap-10

item

.gap-40

item

.gap-60

item

Simple row and column

.row

item

.col

item

Spacing

Spacing system that keeps vertical and horizontal spacing global on your website.

Spacing - horizontal

margin-left and margin-right

Space left

.space-left-xsmall

.space-left-small

.space-left-medium

.space-left-large

.space-left-xlarge

Space right

.space-right-xsmall

element

.space-right-small

element

.space-right-medium

element

.space-right-large

element

.space-right-xlarge

element

Spacing - vertical

margin-bottom and margin-top

Space bottom

.space-bottom-xsmall

.space-bottom-small

.space-bottom-medium

.space-bottom-large

.space-bottom-xlarge

Space top

.space-top-xsmall

.space-top-small

.space-top-medium

.space-top-large

.space-top-xlarge

Spacing - equal inner spacing for sections

Spacing - equal left right

padding-left and padding-right

.section-space-horizontal-20-20

.section-space-horizontal-40-40

.section-space-horizontal-60-60

Spacing - equal top bottom

padding-top and padding-bottom

.section-space-vertical-20-20

.section-space-vertical-40-40

.section-space-vertical-80-80

Remove all spacing from default Webflow components

.space-clean

Typography

Typography organization keeps your brand professional. Correct usage of H1, H2, H3 for SEO.

Heading tags

Always use tags to determine headings.

Page must have only one H1 - SEO requirement. Add class .style-heading-large to h2, h3, etc. if you need more then one heading with the same stile as H1.

H1

H2

H3

H4

H5

H6

Font size unique

.style-heading-huge

.style-heading-large

.style-heading-medium

Content

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

.style-text-large

.style-text-small

.style-text-tiny

Text Link

Block Quote

.style-text-strikethrough

Rich text

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.

We have created special .rich-text class with a special formatting for each component.

h1

h2

h3

h4

h5

h6

quote

link

list item
list item
‍

Paragraph text

Font weight

.style-text-bold

.style-text-normal

Text alignment

.style-text-left

.style-text-center

.style-text-right

Colors

Typography organization keeps your brand professional. Correct usage of H1, H2, H3 for SEO.

Text color

Add to sections, containers, and elements to change the background color

.style-text-color-white

.style-text-color-grey

.style-text-color-black

.style-text-muted - add opacity to text

Background color add-ons

Add to sections, containers, and elements to change the background color

.style-background-white

.style-background-grey

.stylebackground-black

Responsive visibility

Unique experience on each device.

Show and hide elements by screensize

.hide - hide on all devices

.hide-tablet - hide starting from tablet resolution

.hide-landscape - hide starting from landscape resolution

.hide-mobile - hide starting from mobile resolution

.show-tablet - display starting from tablet resolution

.show-landscape - display starting from landscape resolution

.show-mobile - display starting from mobile resolution

Components

Form components, buttons, dropdown, tabs, slider, and more inside.

Buttons

Tip: use .grid-row .gap-small/medium/large as a wrapper to put the space between two buttons

.button

.button-secondary

.button-text

Use add-on class .invert-colors when placing button on dark background

.button

.button-secondary

.button-text

Forms

Webflow native form elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Slider

This is some text inside of a div block.

Tabs

This is some text inside of a div block.

Icons

Icon classes

.icon-16

.icon-30

.icon-40

.icon-60

.icon-80

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Inline SVG icons

Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.</svg>

Classes

Structure

Core structures and max width

Global padding

Utility classes

Grids

Grid columns

Grid rows

Add-ons to 'Grid rows'

Simple row and column

Spacing

Spacing - horizontal

Space left

Space right

Spacing - vertical

Space bottom

Space top

Spacing - equal inner spacing for sections

Spacing - equal left right

Spacing - equal top bottom

Remove all spacing from default Webflow components

Typography

Heading tags

H1

H2

H3

H4

H5

H6

Font size unique

Content

Rich text

h1

h2

h3

h4

h5

h6

Font weight

Text alignment

Colors

Text color

Background color add-ons

Responsive visibility

Show and hide elements by screensize

Components

Navigation

Buttons

Forms

Slider

Tabs

Dropdown

Lightbox

Search

Icons

Icon classes

Inline SVG icons