Style Guide

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla.

BODY Copy

Getting style data...

Getting style data...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Arcu non odio euismod lacinia at. Pulvinar mattis nunc sed blandit libero volutpat. Vitae justo eget magna fermentum. Volutpat ac tincidunt vitae semper quis lectus nulla at. Semper eget duis at tellus at. Nibh sed pulvinar proin gravida hendrerit.

Getting style data...

Font Families

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Adjusting the Body's Typography properties: font, weight, size, height, color, etc., will affect all text: headlines, paragraphs, site navigation, links, lists and buttons site-wide. These properties can be overwritten by creating a new class.

Headline

h1. We Are Incredible

Getting style data...

h2. We Are Incredible

Getting style data...

h3. We Are Incredible

Getting style data...

h4. We Are Incredible

Getting style data...

h5. We Are Incredible

Getting style data...

h6. We Are Incredible

Getting style data...

You can use the class truncate to shorten text with an ellipsis (...).

Example: This text has a max-width of 300px and is truncated.

Paragraph

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Arcu non odio euismod lacinia at. Pulvinar mattis nunc sed blandit libero volutpat. Vitae justo eget magna fermentum. Volutpat ac tincidunt vitae semper quis lectus nulla at. Semper eget duis at tellus at. Nibh sed pulvinar proin gravida hendrerit.

Blog Article

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 content.

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.

Sizes

Text xs

text-xs

Text sm

text-sm

Text md

text-md

Text lg

text-lg

Text xl

text-xl

Use no more than 3 fonts for better page load times.

Swatches & Branding

Modifying COLOR SWATCHES will modify all elements site-wide. This includes: HEADLINES, PARAGRAPHS, BUTTONS, BACKGROUND COLORS, etc.

To EDIT COLOR SWATCHES go to the TYPOGRAPHY PANEL located to the right in Webflow Designer and select the COLOR property. *This can also be done through the BACKGROUNDS PANEL.

To EDIT COLOR SWATCHES go to the TYPOGRAPHY PANEL located to the right in Webflow Designer and select the COLOR property. *This can also be done through the BACKGROUNDS PANEL.

This panel will display all available COLOR SWATCHES.

This panel will display all available COLOR SWATCHES.
Click on a SWATCH to view the color information.
Select to EDIT the highlighted SWATCH.

You can modify the selected SWATCH with the COLOR PICKER.

You can modify the selected SWATCH with the COLOR PICKER.

Click Save to store the modified SWATCH to your library. Changes will show immediately in Webflow Designer.

Click on to PUBLISH and view your changes.

Swatches

Brand

Primary

Getting style data...

text-primary
background-primary

Secondary

Getting style data...

text-secondary
background-secondary

Tertiary

Getting style data...

text-tertiary
background-tertiary

Accent

Getting style data...

text-accent
background-accent

Grayscale

White

Getting style data...

text-white
background-white

Light Grey

Getting style data...

text-light-grey
background-light-grey

Grey

Getting style data...

text-grey
background-grey

Dark Grey

Getting style data...

text-dark-grey
background-dark-grey

Black

Getting style data...

text-black
background-black

States

Error

Getting style data...

text-error
background-error

Warning

Getting style data...

text-warning
background-warning

Success

Getting style data...

text-success
background-success

Brand

Getting style data...

background-primary

Getting style data...

background-secondary

Getting style data...

background-accent

Grayscale

Getting style data...

background-white

Getting style data...

background-light-gray

Getting style data...

background-gray

Getting style data...

background-dark-gray

Getting style data...

background-black

Getting style data...

background-gandalf

States

Getting style data...

background-error

Getting style data...

background-warning

Getting style data...

background-success

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla.

Brand

Learn more

button-primary

Learn more

button-secondary

Learn more

button-tertiary

Learn more

button-accent

Outline

Learn more

button-outline button-primary

Learn more

button-outline button-secondary

Learn more

button-outline button-tertiary

Learn more

button-outline button-accent

Grayscale

Learn more

button-white

Learn more

button-light-grey

Learn more

button-grey

Learn more

button-dark-grey

Learn more

button-black

Grayscale Outline

Learn more

button-outline

Learn more

button-outline button-white

Learn more

button-outline button-light-grey

Learn more

button-outline button-grey

Learn more

button-outline button-dark-grey

Learn more

button-outline button-black

Button Group

Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla.

Brand

Learn more

Getting style data...

Learn more

Getting style data...

link-primary

Learn more

Getting style data...

link-secondary

Learn more

Getting style data...

link-tertiary

Learn more

Getting style data...

link-accent

Grayscale

Learn more

Getting style data...

link-white

Learn more

Getting style data...

link-light-grey

Learn more

Getting style data...

link-grey

Learn more

Getting style data...

link-dark-grey

States

Learn more

Getting style data...

link-error

Learn more

Getting style data...

link-warning

Learn more

Getting style data...

link-success

Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla.

Grid & Block Layout

cell

cell

grid

cell cell-33

cell cell-33

cell cell-33

grid

cell cell-25

cell cell-25

cell cell-25

cell cell-25

grid

block

Modifiers

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla.

Sizes (%)

width-25

width-50

width-75

width-100

Sizes (Fixed)

width-xs

width-sm

width-md

width-lg

width-xl

Effects

box-shadow-strong

box-shadow-light

Logos

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla.