Style Guide

Subclass-Name:

ff-primary

Montserrat

Some text that can be used for a Title.

This is a paragraph with a small text size. Class name is paragraph-small. Subclass name is ff-primary. With this class and subclass the paragraph will be displayed as your primary font-family with a size of .875rem (14px) and a line height of 1.5- (approximately 150% of the text size.

The Heading above is an H2 heading class with a subclass of ff-primary. It has a size of 3.5rem (56px) with a line height of 1.2- (approximately 120% of the text size).

This is a paragraph with a small text size. Class name is paragraph-small. Subclass name is ff-primary. With this class and subclass the paragraph will be displayed as your primary font-family with a size of .875rem (14px) and a line height of 1.5- (approximately 150% of the text size.

NOTE: The text sizes are in rem as it is a standard in web design and is more responsive in different web browsers. px (pixels) is static and cannot change sizes as the browser grows or shrinks. To convert pixels to rems simply divide the pixels by 16. This can be converted directly within the text size window by typing your pixel size followed by a division slash, then 16rem. Press enter to convert to rem. (Example: 40/16rem - enter).

Subclass-Name:

ff-secondary

Inter

Some text that can be used for a Title.

The Heading above is an H2 heading class with a subclass of ff-primary. It has a size of 3.5rem (56px) with a line height of 1.2- (approximately 120% of the text size).

The text above the paragraph is a possible title. Its class is title-small with a subclass of ff-primary. Its text size is 1.25rem (20px) with a line height of 1.4- (approximately 140% of the text size).

NOTE: The text sizes are in rem as it is a standard in web design and is more responsive in different web browsers. px (pixels) is static and cannot change sizes as the browser grows or shrinks. To convert pixels to rems simply divide the pixels by 16. This can be converted directly within the text size window by typing your pixel size followed by a division slash, then 16rem. Press enter to convert to rem. (Example: 40/16rem - enter).

Class-Name:

global-padding

< left-pad = 2.5rem

ELEMENT PLACEHOLDER

right-pad = 2.5rem >

Class-Name:

section-padding-large

^ top-pad = 8rem (128px)

ELEMENT PLACEHOLDER

right-pad = 8rem (128px)

Class-Name:

section-padding-medium

^ top-pad = 5rem (80px)

ELEMENT PLACEHOLDER

right-pad = 5rem (80px)

Class-Name:

section-padding-small

^ top-pad = 2.5rem (40px)

ELEMENT PLACEHOLDER

right-pad = 2.5rem (40px)

Class-Name:

section-padding-xsmall

^ top-pad = 1.25rem (20px)

ELEMENT PLACEHOLDER

right-pad = 1.25rem (20px)

Class-Name:

container-large

Desktop
Maximum Width = 100vw (1440px)
L & R Margin = Auto

Tablet
Maximum Width = 100vw (768 - 991px)
L & R Margin = Auto

Mobile-H
Maximum Width = 100vw (480 - 767px)
L & R Margin = Auto

Mobile-V
Maximum Width = 100vw (320 - 479px)
L & R Margin = Auto

Class-Name:

container-medium

Desktop
Maximum Width = 82vw (1152px)
L & R Margin = Auto

Tablet
Maximum Width = 85rem (653 - 842px)
L & R Margin = Auto

Mobile-H
Maximum Width = 85vw (408 - 652px)
L & R Margin = Auto

Mobile-V
Maximum Width = 80vw (256 - 383px)
L & R Margin = Auto

Class-Name:

container-small

Desktop
Maximum Width = 67vw (900px)
L & R Margin = Auto

Tablet
Maximum Width = 78vw (600 to 773px)
L & R Margin = Auto

Mobile-H
Maximum Width = 76vw (365 - 583px)
L & R Margin = Auto

Mobile-V
Maximum Width = 76vw (243 - 364px)
L & R Margin = Auto

Class-Name:

container-xsmall

Desktop
Maximum Width = 47vw (640px)
L & R Margin = Auto

Tablet
Maximum Width = 68vw (522px to 674px)
L & R Margin = Auto

Mobile-H
Maximum Width = 68vw (326 - 522px)
L & R Margin = Auto

Mobile-V
Maximum Width = 68vw (218 - 326px)
L & R Margin = Auto

All H1 Headings

All H2 Headings

All H3 Headings

All H4 Headings

All H5-Headings

All H6 Headings

H1-Heading

With variable ff-primary

H2-Heading

With variable ff-primary

H3-Heading

With variable ff-primary

H4-Heading

With variable ff-primary

H5-Heading

With variable ff-primary

H6-Heading

With variable ff-primary

Title-large

With variable ff-secondary

Title-medium

With variable ff-secondary

Title-small

With variable ff-secondary

Title-xsmall

With variable ff-secondary

These are paragraph styles in large, medium, and small sizes, each with their own line height. To see these paragraph samples in your primary or secondary font family, add the appropriate subclass (i.e., ff-primary or ff-secondary).

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.

Special Text Classes

Class name: sub-head

This is a text style for a subhead that can sit above or below a heading using the class name "sub-head". It is 1.75rem (or 28px) in size.

Class name: eyebrow

This is text style for "eyebrow" or "kicker" elements that sit above a heading. Use the class name of "eyebrow". It is 1.25rem (or 20px) in size.

This is text style for "breadcrumb" elements using the class name of "breadcrumb". It is 1.125rem (or 18px) in size.

Class name: category

This is text style for collection "category" elements using the class name of "category". It is 1.125rem (or 18px) in size.

Class name: pre-header

This is text style for a "pre-header" element using the class name "pre-header". It is .75rem (or 12px) in size.

Class name: tab-text-small

This is text style for a tab element using the class name of "tab-text-small". It is .875rem (or 14px) in size.

Class name: copyright

This is text style for a text element used for copyright information in a footer using the class name of "copyright". It is .75rem (or 12px) in size.

Class name: disclosure

This is text style for a text element used for disclosure information in a footer using the class name of "copyright". It is .75rem (or 12px) in size.

General Text Classes

This is normal text in 3.5rem (56px).

This is normal text in 3rem (48px).

This is normal text in 2.5rem (40px).

This is normal text in 2rem (32px).

This is normal text in 1.75rem (28px).

This is normal text in 1.5rem (24px).

This is normal text in 1.25rem (20px).

This is normal text in 1.125rem (18px).

This is normal text in 1rem (16px).

This is normal text in .875rem (14px).

This is normal text in .750rem (12px).

Page Button Classes

Button Text

Element: button
Class: button-primary

Button Text

Element: button
Class: button-secondary

Button Text

Element: DIV w text & icon
Class: button-primary-wrap

Button Text

Element: DIV w text & icon
Class: button-secondary-wrap

NOTE:
For standard buttons without an icon, use the button element that includes text. Assign each button a class name (i.e., button-primary or button-secondary)
‍
For buttons with an icon, use a DIV with the class name "button-primary-wrap" (solid with your primary color) or button-secondary-wrap (outline with border in secondary color) The button's Text element is designated with a text size class. The button icon is an Embed Code element. Its color can be changed by selecting it and then changing the text color in the style panel. The embedded icon is enclosed in a DIV element that is set to a specific pixel size to work within the button wrap.

Button Text

Element: text
Class: size-.875rem
Primary Subclass: white
Secondary Subclass: blk-70

Element: DIV w code embed
Class: button-icon-wrap
Class: button-code-embed
Color: set with text color

Navbar Classes

Webflow's Navbar element has been given a new container with the class name of "navbar_container". and internal elements have been styled with the class names below.
The Navbar has been given the class name of "navbar", its background has been changed to transparent, and its height has been changed to 5rem (80px).
These can be modified here on the stylesheet if you wish to change the design or background color. Just be sure to keep the class names the same.

List Classes

Element: List
Class: list-UOrd-noBullets

This is a list item (class: list-item)
This is a list item
This is a list item

Element: List
Class: list-Ord-Bullets

This is a list item (class: list-item)
This is a list item
This is a list item

Element: List
Class: list-Ord-Numbers

This is a list item (class: list-item)
This is a list item
This is a list item

Elements: DIV w head & text-link
Class: list-footerLinks-wrap

Heading (class: title_xsmall

Text Link (class: text-link-small)Text Link Text Link Text Link Text Link

Grid Classes

Element: Grid
Class: grid-1col

Placeholder

Element: Grid
Class: grid-2col

Placeholder

Element: Grid
Class: grid-3col

Placeholder

Element: Grid
Class: grid-4col

Placeholder

Spacer Classes

Element: DIV
Class: spacer-large

Placeholder

Element: DIV
Class: spacer-medium

Placeholder

Element: DIV
Class: spacer-small

Placeholder

Element: DIV
Class: spacer-xsmall

Placeholder

Span Classes within text elements

Element: Text with span
Class: bold-text

Text with a span option of bold text

Element: Text with span
Class: italic-text

Text with a span option of italic text

Element: Text with span
Class: span-semi-bold

Text with a span of bold text weight

Element: Text with span
Class: span-light

Text with a span of light text weight

Element: Text with span
Class: span-underline

Text with a span of underline

Element: Text with span
Class: span-strikethrough

Text with a span of strikethrough

Flexbox Subclasses

Element: added after class in style window
Class: flex_ltop

Text inside horizontal flex layout with
left X position and top Y position

Element: added after class in style window
Class: flex_ctop

Text inside horizontal flex layout with
center X position and top Y position

Element: added after class in style window
Class: flex_rtop

Text inside horizontal flex layout with
right X position and top Y position

Element: added after class in style window
Class: flex_lcent

Text inside horizontal flex layout with
left X position and center Y position

Element: added after class in style window
Class: flex_lbot

Text inside horizontal flex layout with
left X position and bottom Y position

Element: added after class in style window
Class: flex_centcent

Text inside horz. flex layout with
center X position and center Y position

Element: added after class in style window
Class: flex_hspace

Text inside horz. flex layout
space between . . .

. . . elements (X = space
between and Y = stretch

Element: added after class in style window
Class: flex_vspace

Text inside vert. flex layout with space between . . .

. . . elements (X = stretch and Y = space between

Element: added after class in style window
Class: flex_base-space

Text inside vert. flex layout with
baseline X position and Y space between

Element: added after class in style window
Class: flex_inline-left

button

Element: added after class in style window
Class: flex_inline-cent

button

Element: added after class in style window
Class: flex_inline-right

button