Style Guide

This style guide page contains styles and components that are to be used throughout a website. You can find out more about having a style guide here.

Typography

The different text sizes used throughout the site.

<h1> Heading

.h1 Heading

<h2> Heading

.h2 Heading

<h3> Heading

.h3 Heading

<h4> Heading

.h4 Heading
<h5> Heading
.h5 Heading
<h6> Heading
.h6 Heading
<Paragraph>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<Paragraph> "Paragraph large"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<Paragraph> "P JuMBO"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<Paragraph> "P Bold"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<Paragraph> "P Small"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<BLOCK Quote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<List>
  • Heading line height is fixed
  • All buttons now have tooltips
  • Spell checker number issue fixed
Figure with caption
Example Image
An image with caption

Rich Text

Formatted rich text element used for long sections of text such as blog posts.

<h1> Header

<h2> Header

<h3> Header

<h4> Header

<h5> Header
<h6> Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Latest updates

  • Heading line height is fixed
  • All buttons now have tooltips
  • Spell checker number issue fixed

This is a link

Example Image
An image with caption

Colors

Colors assigned as variables to use throughout the website. When we add new colors for campaigns, preface the color name with the campaign name. See RND example below.

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Red Nose Day Colors

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Text Color

Text on Background

Buttons & Links

The different types of buttons used throughout the website.

<Button>

Sign Up

"Btn"-"Btn OUtline"

Get in touch

"BTN Small"

Learn more

"Arrow button"

"Standard Link"

Animated

Section Padding

Style these classes to create consistent spacing throughout the site

Section
Section
Medium Spacing
Section
Small Spacing
Spacing
Small Spacing
Section
Padding Bottom
Section
Medium Spacing
Padding Bottom
Section
Small Spacing
Padding Bottom
Section
Medium Spacing
Large Padding Bottom
Section
Small Spacing  
Large Padding Bottom

Spacers

Spacer elements to provide vertical or horizontal spacing. Use class "Spacer" then the amount.

"SPACER"

"SPACER" - "2rem'

"SPACER" - "3rem'

"SPACER" - "4rem'

"SPACER" - "5rem'

"SPACER" - "2rem'

"SPACER" - "7rem'

"SPACER" - "8rem'

"SPACER" - "9rem'

"SPACER" - "10rem'

"SPACER" - "12rem'

Icons

Social icons used across the website.

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

FIELD BLOCK

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

FORM 2 column

Checkbox group label

Checkbox group label

Success

Your submission has been received!
Oops! Something went wrong while submitting the form.

Newsletter form

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Examples

Examples of combo elements used across the site.

PRESS LIST

EYEBROW

Date

Heading

Summary

EYEBROW

Date

Heading

Summary

Section Headers

Style these classes to create consistent spacing for headline and sub-headline blocks. This system makes it easy to adjust spacing on tablet and mobile.

Section Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button Text

Section Heading Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button Text

On Building Pages

Modified from Whiteboard.is conventions

Use Title Case for Naming

We use title case for our naming our CSS classes in Webflow - capitalize each word with spaces in between words. In other words, we use Section Header rather than section-header

Here are a few more example class names:

  • Section Header Component
  • Container
  • Side by Side Component
  • Profile Card Component
  • FAQ Item Trigger

Using title case makes our classes very user friendly. They’re a lot easier to read in the designer and more understandable for our non-developer clients.

Webflow automatically generates CSS from the class names we create by converting our class names to lowercase and replacing spaces with hyphens. For example, FAQ Item Trigger becomes faq-item-trigger allowing us to use .faq-item-trigger in any custom code.

If a classname starts with a number, Webflow will add an underscore to the beginning of the generated classname. For example, 3 Column Grid becomes _3-column-grid

Be Component-Focused

Our development style focuses on modular, component-based building. A component is a standalone, reusable group of elements that you can copy and paste onto another page without it losing its functionality.

Examples:

  • FAQ List Component (commonly a Collection List Wrapper)
  • Header Component
  • Side-by-side Content Component

We focus on components because, in Webflow, it makes it easy to use copy-and-paste to add to an existing page or create whole new pages in the Designer.

To help identify components, we can use the following three types of classes:

  • Component Level Class: Includes a clear name followed by the word “Component”. Example: Newsletter CTA Component
  • Component Element Class: Includes the component name followed by a clear name describing the element. Example:  Newsletter CTA Heading
  • Component Modifier Classes: Includes the component name followed by a clear name describing the alternate version: Example:  Newsletter CTA   Gradient Background
Example: FAQ List Component

Let’s take our FAQ list as an example. The outermost HTML element that we can copy and paste should be given the suffix Component and named something that clearly describes what the component is. So, we could use: FAQ List Component. Then, elements inside of the component should reference what component it is inside of. So, the class structure could look like:

  • FAQ List Component
  • FAQ List Item
  • FAQ List Item Trigger
  • FAQ List Item Pane

Utility Classes

Utility classes are global classes that can be used independently or to make slight tweaks to existing classes. For example, let’s say that our Button class has 16px of top margin, but there’s one instance where it needs to have 24px of top margin. We can quickly make this change by adding the Margin Top 24 utility class as a combo class to Button.

In general, utility classes should only be used one layer deep. If you need to add two utility classes to achieve the desired result, that’s an indicator that you should go ahead and create a custom class.

Modified from Whiteboard.is conventions

Use Title Case for Naming

We use title case for our naming our CSS classes in Webflow - capitalize each word with spaces in between words. In other words, we use Section Header rather than section-header

Here are a few more example class names:

  • Section Header Component
  • Container
  • Side by Side Component
  • Profile Card Component
  • FAQ Item Trigger

Using title case makes our classes very user friendly. They’re a lot easier to read in the designer and more understandable for our non-developer clients.

Webflow automatically generates CSS from the class names we create by converting our class names to lowercase and replacing spaces with hyphens. For example, FAQ Item Trigger becomes faq-item-trigger allowing us to use .faq-item-trigger in any custom code.

If a classname starts with a number, Webflow will add an underscore to the beginning of the generated classname. For example, 3 Column Grid becomes _3-column-grid

Be Component-Focused

Our development style focuses on modular, component-based building. A component is a standalone, reusable group of elements that you can copy and paste onto another page without it losing its functionality.

Examples:

  • FAQ List Component (commonly a Collection List Wrapper)
  • Header Component
  • Side-by-side Content Component

We focus on components because, in Webflow, it makes it easy to use copy-and-paste to add to an existing page or create whole new pages in the Designer.

To help identify components, we can use the following three types of classes:

  • Component Level Class: Includes a clear name followed by the word “Component”. Example: Newsletter CTA Component
  • Component Element Class: Includes the component name followed by a clear name describing the element. Example:  Newsletter CTA Heading
  • Component Modifier Classes: Includes the component name followed by a clear name describing the alternate version: Example:  Newsletter CTA   Gradient Background
Example: FAQ List Component

Let’s take our FAQ list as an example. The outermost HTML element that we can copy and paste should be given the suffix Component and named something that clearly describes what the component is. So, we could use: FAQ List Component. Then, elements inside of the component should reference what component it is inside of. So, the class structure could look like:

  • FAQ List Component
  • FAQ List Item
  • FAQ List Item Trigger
  • FAQ List Item Pane

Utility Classes

Utility classes are global classes that can be used independently or to make slight tweaks to existing classes. For example, let’s say that our Button class has 16px of top margin, but there’s one instance where it needs to have 24px of top margin. We can quickly make this change by adding the Margin Top 24 utility class as a combo class to Button.

In general, utility classes should only be used one layer deep. If you need to add two utility classes to achieve the desired result, that’s an indicator that you should go ahead and create a custom class.

More Resources

Webflow University. Webflow's bank of resources – lots of good and helpful resources for learning how to build in Webflow!