Webflow University Styleguide

Headings

Use the separate class for each size to overwrite visual style while maintaining the proper semantic order.

.h0 Class

H0 — 3.75rem (60px) / 1

Semantic H1

H1 — 3.125REm (50px) / 1.1
H1 Class
H1

Semantic H2

H2 — 2.rem (38px) / 1.2
H2 Class
H2

Semantic H3

H3 — 2rem (32px) / 1.3
H3 Class
H3

Semantic H4

H4 — 1.2rem (20px) / 1.3
H4 Class
H4
Semantic H5
H5 — 1rem (16px) / 1.2
H5 Class
H5
Semantic h6
H6 — 0.875rem (14px) / 1.3
H6 Class
H6

Paragraphs

paragraph_l 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_l — 1.2 rem (20px) / 1.3

paragraph 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 — 1 rem (16px) / 1.5

paragraph_s 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 — 0.8 rem (13px) / 1.5

Rich Text element

rich_text is used as the body copy for Webflow University articles/lessons

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.

Lists
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • You can also style the caption element. Select a caption, then select the All Figure Captions tag and style it.
  1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  2. ‍code, not static mockups 
Use H6 for FYI or GENERAL NOTE type messages.
Use Blockquotes for a CAUTION or BE CAREFUL type messages.



<script type="text/javascript">
  var popup = document.getElementById('consentPopup');  
  var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';
  //Show the consent banner if consent is not granted, hide it if consent is already granted.  
  if (alreadyLoaded) {    
  popup.style.display = 'none';    
  fbq('consent', 'grant');  
  } else {    
  popup.style.display = 'block';  
  }
  
  //Grant consent and store it in localStorage of the browser  
  var consentBtn = document.getElementById('consentBtn');  
  consentBtn.addEventListener("click", function() {  
  fbq('consent', 'grant');    
  window.localStorage.setItem('fbGrantConsent', 'true');  
  });
</script>
Copy codeCopied!
xals,.mcdslkvmsdklvmkdvck;ds

Rich Video element

rich_video is used as displaying a video lesson for Webflow University articles/lessons

Rich Video element

rich_light is used as the body copy for Webflow University course page.

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.

Color

A collection of core brand colors often used in this project.

Background colors

cc-bg_darkgrey — #2b2b2b
cc-bg_darkmode — #272729
cc-bg_grey — #fbfbfd
cc-bg_videoplayer — ##1b1c1d
cc-bg-white — #000000
cc-bg-gradient
cc-bg-gradientPink
cc-bg-gradientBlue

Components

Buttons

Buttons have two sizes, small and large. We use the arrow to the right when it's linked to a related page, and arrow going top-right for links that go to other sections or open in a new tab.

Default

Buttoncc-transperant
Buttoncc-copy-code
Buttoncc-grey

Table

Review and update the custom attributes used across all elements in the table that make it accessible for screen readers and equivalent to a traditional <table> element. For example, on the table-grid, element you must set the specific count of rows and columns, as well as give the table a name.

Size
Heading
Heading
Heading
Heading
Cell
Cell
Cell
Heading
Cell
Cell
Cell
Heading
Cell
Cell
Cell
Heading
Cell
Cell
Cell
Heading
Cell
Cell
Cell
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
Platform feature
Edge
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

Notification banner

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

Sticky heading

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.

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Code Block

Review and update the custom attributes used across all elements in the table that make it accessible for screen readers and equivalent to a traditional <table> element. For example, on the </table>table-grid, element you must set the specific count of rows and columns, as well as give the table a name.



<script>
  jQuery(function(){
 
   if(!$.fn.imagezoomsl){
 
      $('.msg').show();
      return;
    }
    else $('.msg').hide();
 
    // plugin initialization
    $('.image').imagezoomsl({
 
      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      disablewheel: false
    });
  });
</script>
Copy codeCopied!
Copy codeCopied!
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)