%201.png)
Customize
Style Guide
Color
Backgrounds
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.
Text Colors
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.
Typography
Fonts
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.
Headings
Header styling is set globally, and each one has a class name override, enabling any text element to utilize its specific styling.
H1. Display Heading
Font-size: 4rem / Line-height: 1.15
H1. Heading
H1. Style Heading
Font-size: 3rem / Line-height: 1.15
H2. Heading
H2. Style Heading
Font-size: 2.5rem / Line-height: 1.15
H3. Heading
H3. Style Heading
Font-size: 2rem / Line-height: 1.15
H4. Style Heading
H4. Style Heading
Font-size: 1.75rem / Line-height: 1.15
h5. Heading
h5 Style Heading
Font-size: 1.5rem / Line-height: 1.15
h6. Heading
h6 Style Heading
Font-size: 1.25rem / Line-height: 1.15
Cursive Text
Font-size: 3.75rem / Line-height: 1.15
Body Copy
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
- Example Ordered List
- Example Ordered List
Font-size: 1.125rem / Line-height: 1.6
- Example Unordered List
- Example Unordered List
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
Buttons & Links
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.
.svg){kind=icon}
Forms
Cards
Tabs
Tab Content
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.
Rich Text
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 conten
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.
- Here is a list item
- Here is a list item
- Here is a list item
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.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Block quote
Here are some examples of text styles you can use in a rich text editor:
- Bold
- Link
- Emphasis
- Superscript
- Subscript
Layout
Sections
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.
Containers
Add a class name to a container or div to set a centered width.
Utilities
Margin
Use these global class names for a quick and easy way to apply margin.
Padding
Use these global class names for a quick and easy way to apply padding.
Grids
Use these class names on a div to construct a fast layout.