To apply a background color to any element, simply assign a class name to it. This approach is utilized across multiple sections within the template.
To apply a text color to any element, simply assign a class name to it. This approach is utilized across headings and paragraphs within the template.
All typography in this template is set using REMs, a unit of measure that works best for all devices and user preferences. If you want to easily convert PX to REM checkout this conversion tool: PX to REM converter.
Header styling is set globally, and each one has a class name override, enabling any text element to utilize its specific styling.
Font-size: 4rem / Line-height: 1.15
Font-size: 3rem / Line-height: 1.15
Font-size: 2.5rem / Line-height: 1.15
Font-size: 2rem / Line-height: 1.15
Font-size: 1.75rem / Line-height: 1.15
Font-size: 1.5rem / Line-height: 1.15
Font-size: 1.25rem / Line-height: 1.15
Font-size: 3.75rem / Line-height: 1.15
Paragraph styling is set globally, and has a class name that can be used to override other text elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Font-size: 1.125rem / Line-height: 1.6
Font-size: 1.125rem / Line-height: 1.6
Font-size: 1.125rem / Line-height: 1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Font-size: 1.125rem / Line-height: 1.6
Components with a single class name are shown. Some components would be restricted by implementing a Webflow component, so some won't have the green component indicator around them.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
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 conten
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!
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.
Block quote
Here are some examples of text styles you can use in a rich text editor:
Apply to sections requiring both top and bottom spacing.
Apply to sections that only need top spacing. This usually happens in sections where the background colors blend into one another and you prefer to avoid excessive spacing.
Add a class name to a container or div to set a centered width.
Use these global class names for a quick and easy way to apply margin.
Use these global class names for a quick and easy way to apply padding.
Use these class names on a div to construct a fast layout.