01. Colors

The following are classes specific to designating background and text colors to your elements.

Background colors

.fill--bg--black

.fill--bg--grey

.fill--bg--navy

.fill--bg--teal

.fill--bg--light--blue

.fill--bg--soft--grey

.fill--bg--white

Text colors

.fill--text--black

.fill--text--navy

.fill--text--green

.fill--text--grey

.fill--text--soft--grey

.fill--text--white

02. Typography

Maintaining a structured typographical scale helps your site look and feel consistent across all devices. The following as the baseline styles for your website, feel free to add more as you go.
‍
*Use class .italic to italicized all global text styles
*Use class .center to align-center all global text styles

.heading--xxl

The quick brown fox jumps over the lazy dog.

.heading--xl

The quick brown fox jumps over the lazy dog.

.heading--l

The quick brown fox jumps over the lazy dog.

.heading--m

The quick brown fox jumps over the lazy dog.

.heading--s

The quick brown fox jumps over the lazy dog.

.heading--xs

The quick brown fox jumps over the lazy dog.

.paragraph--l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.paragraph--m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.paragraph--s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.

.label

Lorem ipsum dolor sit amet

.rtf

Heading 1

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.

‍

Heading 2

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.

‍

Heading 3

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.

‍

Heading 4

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.

‍

Heading 5

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.

‍

Heading 6

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.

‍

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

‍

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

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.

.list .bulleted

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.

03. Sections & Containers

The <section> represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.

Containers help define how you want the content within a section to behave, whether you want it to be fluid or fixed max-width. They also center your content within your section.

.section

.container--fluid

.container--1440

.container--1280

.container--960

04. Spacing

The following styles apply for all different types of margins and paddings across your project. Paddings are defined at the container level. Sizers help you reduce the size of your content to match your design needs while keeping everything responsive. Spacers are bottom paddings to establish a seamless vertical cadence for your content.

.padding--xl

.padding--xl {margin-top: 120px; margin-bottom: 120px;}

.padding--l

.padding--l {margin-top: 80px; margin-bottom: 80px;}

.padding--m

.padding--m {margin-top: 64px; margin-bottom: 64px;}

.padding--s

.padding--s {margin-top: 40px; margin-bottom: 40px;}

.padding--xs

.padding--xs {margin-top: 24px; margin-bottom: 24px;}

.width--90

.width--90 {width: 90%;}

.width--80

.width--80 {width: 80%;}

.width--70

.width--70 {width: 70%;}

.width--60

.width--60 {width: 60%;}

.width--50

.width--50 {width: 50%;}

.width--40

.width--40 {width: 40%;}

.width--30

.width--30 {width: 30%;}

.width--20

.width--20 {width: 20%;}

.width--10

.width--10 {width: 10%;}

.margin-b--80

.margin-b--80 {margin-bottom: 80px;}

.margin-b--72

.margin-b--72 {margin-bottom: 72px;}

.margin-b--64

.margin-b--64 {margin-bottom: 64px;}

.margin-b--56

.margin-b--56 {margin-bottom: 56px;}

.margin-b--48

.margin-b--48 {margin-bottom: 48px;}

.margin-b--40

.margin-b--40 {margin-bottom: 40px;}

.margin-b--32

.margin-b--32 {margin-bottom: 32px;}

.margin-b--24

.margin-b--24 {margin-bottom: 24px;}

.margin-b--16

.margin-b--16 {margin-bottom: 16px;}

.margin-b--8

.margin-b--8 {margin-bottom: 8px;}

05. Forms

Webflow forms are self hosted, this styling applies only for WF default forms. If you need to implement a third party form, please refer to their specific documentation.

.form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

06. Components

A library of reusable components to help you build your website.

.btn

.btn .invert

.btn .secondary

.btn .invert .secondary

.btn .Tertiary

.btn .innactive

.tag

.link

.link .strikethru

.img--16-9

.Img--4-3

.Img--1-1