Styles

Complete 20 tasks to start your project.

Structure classes

page
main
section
1/20 – Set an inline padding.
container
2/20 – Set maximum width.
padding-inline
3/20 – Set inline padding for desktop and lower.
tablet_padding-inline
4/20 – Set inline padding for tablet and lower.
item-group
5/20 – Set the row and column gaps for all screens.

Grid

6/20 – Add column gaps to the grid layouts.
grid-2
grid-3
grid-4
grid-12

Headings

7/20 – Set sizes on desktop and mobile for both heading <tag> elements and heading .class elements.
H1
Changes on mobile

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

h1
Changes on mobile

Sample text helps you understand how real text may look.

H2
Changes on mobile

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

h2
Changes on mobile

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

H3
Changes on mobile

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

h3
Changes on mobile

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4
Changes on mobile

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

h4
Changes on mobile

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

H5
Changes on mobile
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.
h5
Changes on mobile
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.
H6
Changes on mobile
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. 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.
h6
Changes on mobile
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. 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.

Color palette

8/20 – Set the project color variables.

Text colors

9/20 – Set text colors.
color-white
color-white
color-gray
color-gray
color-black
color-black
color-primary
color-primary
color-primary-dark
color-primary
color-yellow
color-yellow

Background colors

10/20 – Set background colors (including text colors).
bg-white
bg-black
bg-primary
bg-gray

Text sizes

font-size-large
Changes on mobile
11/20 – Set large size.

Sample text is being used as a placeholder for real text that is normally present on your website.

font-size-standard
Changes on mobile
12/20 – Set standard size. Should be same as the body text size.

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.

font-size-small
Changes on mobile
13/20 – Set small size.

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Other HTML tags

All paragraphs
14/20 – Set <p> style. Should be same as the body text size.

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.

All quotes
Project specific
15/20 – Set <blockquote> style.
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.
All Ordered Lists
16/20 – Set <ol> style.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
17/20 – Set <ul> style.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
All links
Inheriting
Set in code
All Links

Buttons

18/20 – Set base button style – and all variants. Delete some if necessary.
button
Button Text
button
is-secondary
Button Text
button
is-text
Button Text

Webflow Elements

form
19/20 – Style form elements that are used.

Example of a form component using Folders

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
rich-text
20/20 – Make sure rich text is styled correctly.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

This is a link

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
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 that is normally present.
Image caption

Icons

Optional
icon-small
Pre-set to 16px
icon-medium
Pre-set to 32px
icon-large
Pre-set to 48px

Ratio

Optional
ratio-portrait
Pre-set to 2:3
ratio-landscape
Pre-set to 3:2
ratio-widescreen
Pre-set to 16:9
ratio-square

Max widths

Optional
max-width-small
Pre-set to 960px
max-width-medium
Pre-set to 660px
max-width-small
Pre-set to 460px
max-width-full
width-100%
padding-0

Top padding

padding-top-20px
Changes on mobile
padding-top-40px
Changes on mobile
padding-top-60px
Changes on mobile
padding-top-80px
Changes on mobile
padding-top-100px
Changes on mobile
padding-top-120px
Changes on mobile
padding-top-140px
Changes on mobile
padding-top-160px
Changes on mobile

Bottom padding

padding-bottom-20px
Changes on mobile
padding-bottom-40px
Changes on mobile
padding-bottom-60px
Changes on mobile
padding-bottom-80px
Changes on mobile
padding-bottom-100px
Changes on mobile
padding-bottom-120px
Changes on mobile
padding-bottom-140px
Changes on tablet
padding-bottom-160px
Changes on tablet

Bottom margin

margin-0
margin-bottom-10px
Changes on mobile
margin-bottom-15px
Changes on mobile
margin-bottom-20px
Changes on mobile
margin-bottom-25px
Changes on mobile
margin-bottom-30px
Changes on mobile
margin-bottom-40px
Changes on mobile
margin-bottom-60px
Changes on mobile
margin-bottom-80px
Changes on mobile
margin-bottom-100px
Changes on mobile
margin-bottom-120px
Changes on mobile
margin-bottom-140px
Changes on mobile

Flex

flex-row
flex-row-center
flex-column
flex-column-center

Flex align and justify

flex-row
is-left-center
flex-row
is-right-center
flex-column
is-left-center
flex-row
is-right-center

Image elements

image-wrapper
image

Ratio wide

ratio-wide-3-2
ratio-wide-4-3
ratio-wide-5-4
ratio-wide-16-9

Ratio tall

ratio-tall-2-3
ratio-tall-3-4
ratio-tall-4-5
ratio-tall-9-16

Utilities

hide
Set in code
This element is hidden
tablet_hide
Set in code
mobile_hide
Set in code
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
user-select-on
Set in code
user-select-off
Set in code
layer
spacing-0
padding-inline-0
align-center
z-minus-1
Set in code
z-index-1
Set in code
Is relative
z-index-2
Set in code
z-index-3
Set in code
inline-flex
Set in code
is-disabled
is-faded

Text weights

xbold
xbold
bold
bold
semibold
semibold
medium
medium
normal
normal
light
light

Text alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Text styles

text-strikethrough

text-strikethrough

text-italic

text-italic

text-muted

text-muted

text-allcaps

text-allcaps

text-nowrap

text-nowrap

text-underlined

text-link

max-lines-1
Set in code

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 text-style-2lines

max-lines-2
Set in code

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 text-style-2lines

max-lines-3
Set in code

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 text-style-2lines

Custom items

text-strikethrough
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking "Accept all", you accept the storage of cookies on your device.
Settings and informationAccept all