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.

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

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

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.

List

Getting style data...

Getting style data...

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

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

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

You can click on the color code to copy the RGB or HEX value for that color.

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

To apply branding styles to a button the base class button must be used first followed by any one of the 4 branding styles or one of the styling combinations below.

Example: button button-primary

Alt Style

Grayscale

Learn more

button-white

Learn more

button-light-grey

Learn more

button-grey

Learn more

button-dark-grey

Learn more

button-black

Outline

Learn more

button-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

Use the secondary base class button-outline followed by any of the 4 branding styles or one of the styling combinations below.

Example: button button-outine button-grey

Grayscale 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

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.