Style Guide
This page contains all the components used on your site. You can see it as a library where you can consult and edit any style. If you are beginning with Webflow, we highly recommend you to take a look at the Webflow 101 Crash Course.
Text Styles
These are all the text styles used on your site. Add the following classes to change the alignment: Center, Right.
This is a Heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
Paragraph Big
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Rich Text
Formatted rich text element used for long sections of text like projects
This is a heading
This is a H2 heading
This is a H3 heading
This is a H4 Heading
This is a H5 Heading
This is a H6 Heading
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.
Here is a text link for your rich text element.
"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."
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor
Colors
Here you will find all the colors used on your site. Applying a color palette brings a unified and recognizable consistency to your interfaces.
Buttons
Buttons are used to initialize an action. Use clear button labels to express what action will occur when the user interacts with it.
Form
A form is a group of related input controls that allows users to provide data or configure options.
Grids
Grid give you more direct control over your layout and design.
4 Grid
3 Grid
2 Grid
Tex Box
Boxes of different sizes to house content.
400px
500px
600px
1000px
Spacers
Spacing is important and often overlooked in product design. Using white space elements rather than adding margin on your components will help you to achieve a coherent spacing system.
To use spacers, add a div in your design and give it the name "Spacer". Then select a combo class (ex: 32) to set its size.
8px
16px
24px
32px
40px