Style Guide
Webflow University provides a library of videos, tutorials and resources to help you get started.
Color
Primaries and grays controlled by the Global Swatch feature.
Typography
Primaries and grays controlled by the Global Swatch feature.
64px
Display Text
Lorem ipsum dolor
48px
Heading 1
Lorem ipsum dolor
40px
Heading 2
Lorem ipsum dolor
32px
Heading 3
Lorem ipsum dolor
24px
Heading 4
Lorem ipsum dolor
20px
Heading 5
Lorem ipsum dolor
18px
Heading 6
Lorem ipsum dolor
18px
Body L Med
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
18px
Body L Reg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
16px
Body N Med
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
16px
Body N Reg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
14px
Body S Med
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
14px
Body S Reg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Rich Text
Primaries and grays controlled by the Global Swatch feature.
What’s a Rich Text element?
Before working on a project, it is necessary for the team to decide on a methodology to use. Choosing a compatible method is indispensable to a successful project, as they give your project a structure, a framework, which you and your team can work and communicate by. The two most popular methodologies are the traditional waterfall approach and the agile approach. But which methodology should you choose for your own project? In order to help you make an informed decision, we compiled the most striking benefits of each model – and their respective challenges. Want to bring your project management to the next level? Then check out our article on the best tools for project managers here.
Main phases of the waterfall process
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!
Sustainability
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.
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.
Button
Primaries and grays controlled by the Global Swatch feature.
Forms
Primaries and grays controlled by the Global Swatch feature.
Icon
Primaries and grays controlled by the Global Swatch feature.