Headings
Use the separate class for each size to overwrite visual style while maintaining the proper semantic order.
.h0 Class
Semantic H1
Semantic H2
Semantic H3
Semantic H4
Semantic H5
Semantic 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 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_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.
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.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- 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>
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.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- 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>
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.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- 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>
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.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- 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>
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.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- 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>
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.
- bhjbvjh
- njkbnkj
- njnkj
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
Components
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
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.
Getting started
Interactions & animations
CMS & dynamic content
Ecommerce
Hosting & code export
SEO
Templates
Site settings
Account & billing
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.
+2
+2
(WIP)
+2
+2
+2
(WIP)
+2
+2
+2
(WIP)
+3
+3
+2
+2
(WIP)
+2
+2
+2
(WIP)
+2
+2
+2
(WIP)
+3
+3
Notification banner
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>
Footer
All rights reserved.
All rights reserved.
For styling
For styling
Dropdown component for the Sidenav (do not remove classes and custom code)
