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

The different text sizes used throughout the site.

Extra Large

Text Styles

Large

Text Styles

Medium

Text Styles

Regular

Text Styles

Small

Text Styles

Extra Small

Text Styles

Paragraph

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.

Link

Text Link

Rich text

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

This is your image caption
Lorem ipsum dolor sit amet consectetur. Nunc arcu elit consectetur in malesuada nisi rutrum. Pellentesque molestie pulvinar faucibus donec at massa. Amet nunc natoque dignissim senectus metus. Tempor aliquet pharetra diam massa at.

‍

  • Bullet item
  • Bullet item
  • Bullet item
  1. List item
  2. List item
  3. List item

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.

Button

Buttons are used to initialize an action. Use clear button labels to express what action will occur when the user interacts with it.

Button TextButton Text

Form

A form is a group of related input controls that allows users to provide data or configure options.

Thank you! Your submission has been received!
Please make sure all fields are filled out correctly.

Text box

Boxes of different sizes to house content.

400px

500px

600px

700px

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: 32px) to set its size.

8px

16px

24px

32px

40px