Styles
Selectors
class

For style selector

attribute

For custom attributes

tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Default HTML tag on Webflow

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Universal reusable element

Typography
Headlines
h1

Lorem ipsum

h2

Lorem ipsum

h3

Lorem ipsum

h4

Lorem ipsum

h5
Lorem ipsum
Body
body-xl

Lorem ipsum dolor

body-l

Lorem ipsum dolor

body-m

Lorem ipsum dolor

body-s

Lorem ipsum dolor

body-xs

Lorem ipsum dolor

Typography Settings
Weights & Caps
weight-thin
or
font-weight="1"

Thin (100)

weight-xlight
or
font-weight="2"

Extra light (200)

weight-light
or
font-weight="3"

Light (300)

weight-reg
or
font-weight="4"

Regular (400)

weight-med
or
font-weight="5"

Medium (500)

weight-semi
or
font-weight="6"

Semi bold (600)

weight-bold
or
font-weight="7"

Bold (700)

weight-xbold
or
font-weight="8"

Extra bold (800)

weight-black
or
font-weight="9"

Black (900)

font-caps
or
font-caps

Caps

font-italic
or
font-italic

Caps

Typography Colors
Base
color-glass

Can be used to hide span selections where necessary

■
Main
color-eggplant
■
color-light-sky
■
color-light-sunshine
■
color-light-royal
■
color-royal
■
color-sky
■
color-smoke
■
color-snow
■
color-sunshine
■
Neutrals
color-neutral-100
■
color-neutral-500
■
color-neutral-700
■
color-neutral-900
■
Lavenders
color-lavender-100
■
color-lavender-200
■
color-lavender-300
■
color-lavender-400
■
color-lavender-700
■
color-lavender-900
■
Images
Contain
img-contain

The image fits entirely within the container.

It is scaled so that the entire image is visible without being cropped. However, this may result in blank strips appearing at the sides or at the top and bottom.

This is suitable when it is important to display the image in its entirety: a logo, a product, an icon or a diagram.

Recommended when the image needs to maintain its width-to-height ratio

img-contain
fill

The image fills 100% of the parent element’s width and 100% of its height.

This is recommended when the parent element has strictly defined width and height values, and is well suited to situations where the image has a transparent background

img-contain
vertical

The container takes up 100% of the parent’s height, whilst the width is calculated automatically.

This is recommended for use when an image element is to be displayed proportionally based solely on the parent’s height.

Cover
img-cover

The image fills the container completely.

It is scaled so that there are no empty spaces. However, part of the image may be cropped.

Display Mods
Display Visibility Switching
hide-desk

Show on tablet & mobile

hide-desk-tab

Show on mobile only

hide-desk-mob

Show on tablet only

hide-mob

Show on desktop & tablet

hide-tab-mob

Show on desktop only

Attributes for grid list

These attributes can be used to set the grid display for the target sheet and adjust the number of columns; similarly, item attributes can be used to control how many columns and rows the items will occupy. Desktop settings will be inherited by the tablet if a tablet-specific attribute is present.

list-cols-d="*"

Sets the grid display and the number of columns for the desktop, as specified in the value

list-cols-t="*"

Sets the grid display and the number of columns for tablets specified in the value

item-cols-d="*"

Specifies how many columns an item will occupy within the desktop view

item-cols-d="0"

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

item-cols-t="0"

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

item-cols-t="*"

Specifies how many columns an item will occupy within the tablet view

item-rows-d="*"

Specifies how many rows the item will occupy within the sheet in the desktop view

item-rows-t="*"

Specifies how many rows the item will occupy within the sheet in the tablet view

Examples of use
Typography

Typography classes can be applied to any tag that contains text, be it ‘h1–6’, ‘p’, ‘span’ or ‘div’, as required.
For individual elements, such as ‘input’ or 'button’, it is best to configure them using variables

Below are some examples of the recommended way to define
the order of classes or combinations of classes with attributes

h2
weight-med
color-black

Lorem ipsum

body-l
weight-reg
color-black

Lorem ipsum

body-m
weight-semi
font-caps
color-black

Lorem ipsum

body-m
color-black
+
font-weight="6"
font-caps

Lorem ipsum

Attribute grid