Webflow University Styleguide

Headings & Paragraphs

heading_55

H1 — Looks like this

heading_40

H2 — Looks like this

heading_35

H3 — Looks like this

heading_32

H4 — Looks like this

HEADING_23

H5 — Looks like this

HEADING_19

H6 — Looks like this

HEADING_18

Looks like this

paragraph_17

paragraph_large looks like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

paragraph

paragraph_small looks like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

paragraph_14

paragraph_small looks like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rich text fields

Video element — Top of lesson

Class: rich_video

Body copy — lesson

Class: rich_text

Aenean lacinia bibendum nulla sed lorem consectetur

Not static mockups or simulated prototypes. Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. Whatever you’re building, Webflow CMS has the flexibility you need. Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.

Aenean lacinia bibendum nulla sed lorem consectetur

Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. Whatever you’re building, Webflow CMS has the flexibility you need. Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.

Aenean lacinia bibendum nulla sed lorem consectetur estium

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

Aenean lacinia bibendum nulla sed lorem consectetur

Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. Whatever you’re building, Webflow CMS has the flexibility you need. Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.

Aenean lacinia bibendum nulla sed lorem consectetur

Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. Whatever you’re building, Webflow CMS has the flexibility you need. Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.

Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. Whatever you’re building, Webflow CMS has the flexibility you

need. Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.

  • List item one
  • Two
  • ‍code, not static mockups 
  • ‍code, not static mockups 
Deliver working code, not static mockups or simulated prototypes.
  1. ‍code, not static mockups 
  2. ‍Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.
  3. ‍code, not static mockups 
  4. ‍code, not static mockups 

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

pretty

pretty

pretty

Aenean lacinia bibendum nulla sed lorem consectetur
  • You can also style the caption element. Select a caption, then select the All Figure Captions tag and style it.
  • Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. 
  • Whatever you’re building, Webflow CMS has the flexibility you need. 
  • Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.

  1. ‍code, not static mockups 
  2. ‍Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.
  3. ‍code, not static mockups 
  4. ‍code, not static mockups 

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty. Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

xals,.mcdslkvmsdklvmkdvck;ds

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

 

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

Resources
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Use H6 for FYI or GENERAL NOTE type messages.
Use Blockquotes for a CAUTION or BE CAREFUL type messages.

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

Create the content structure you need in Webflow CMS, then design layout and dynamic references visually — with real data. Whatever you’re building, Webflow CMS has the flexibility you need. Set up hosting to get your site on the web in seconds, with a global hosting infrastructure that can scale with any traffic volume and serve a global audience at top speed.
Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.
  • Stuff and things
  • Stuff

Deliver working code, not static mockups or simulated prototypes.

  1. Code, not static mockups 
  2. ‍Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.
  3. Code, not static mockups 
  4. Code, not static mockups 

Step 2: Stuff and thingsStep 2: Stuff and thingsStep 2: Stuff and thingsStep 2: Stuff and things

Step 3: Stuff and things

Step 4: Stuff and things

Step 5: Stuff and things

Deliver working code, not static mockups or simulated prototypes. Show your developers exactly how your interactions and animations should feel with prototypes that actually work — and don’t just look pretty.

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Components

Notification banner

This is some text inside of a div block.
This is some text inside of a div block.

Sticky heading

― Stephen King

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Platform feature
IE
Edge
Chrome
Safari
Firefox
iOS Safari
Chrome for Android
Designer
x
x
Evergreen
+2
Evergreen
+2
Evergreen +2
(WIP)
x
x
Editor & Data Manager
x
Evergreen
+2
Evergreen
+2
Evergreen
+2
Evergreen +2
(WIP)
x
x
Dashboard
x
Evergreen
+2
Evergreen
+2
Evergreen
+2
Evergreen +2
(WIP)
x
x
Published Sites / Exported Code
11+*
15+*
Evergreen
+3
10.1+*
Evergreen +3
Evergreen +3
Evergreen +3
Interactions
11+*
12+*
Evergreen
+3
10.1+*
Evergreen +3
Evergreen +3
Evergreen +3
This is some text inside of a div block.
This is some text inside of a div block.

Dropdown component for the Sidenav (do not remove classes and custom code)