Start Here.

Only edit these files if you know what you're doing.

"Gigantic - Style 1" component

"Gigantic - Style - Rich Text" component

"Gigantic - JavaScript 1" component

How to add these to every page:

These components are nested in a component called "Gigantic - All Custom Code" that is included in the "Footer" component.

Default Body Text Style

Begin by selecting "Body" in the Webflow Navigator, then in the Style Panel's Selector, choose "(Body) All Pages"

Default Text Block Styles

All Paragraphs. Paragraph sample, 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.

All Links (including Link Blocks) - This is currently set to `color: currentColor`

All Block Quote - the quotes are added in custom CSS

Text Sizes

.font-body

.font-body - This class should match your "(Body) All Pages" styling exactly, and should only be used when absolutely needed. E.g.: when you want a Heading tag to look like body copy.

.p-xxl

.p-lg

.p-sm

.font-label

.font-label - remember to set "All Labels," too

.font-caption

.font-subtitle

.font-large-1

.font-large-1 - Use this instead of styling H1 tags directly

.font-large-2

.font-large-2 - Use this instead of styling H2 tags directly

.font-large-3

.font-large-3 - Use this instead of styling H3 tags directly

.font-large-4

.font-large-4 - Use this instead of styling H4 tags directly

.font-large-5

.font-large-5 - Use this instead of styling H5 tags directly

.font-large-6

.font-large-6 - Use this instead of styling H6 tags directly

HTML Heading Tags

Override these by selecting each one and editing Webflow's "All H1 Headings," or the matching "Heading" version (H1-H6).

All H1 Headings
(should match .font-large-1)

All H2 Headings
(should match .font-large-2)

All H3 Headings
(should match .font-large-3)

All H4 Headings
(should match .font-large-4)

All H5 Headings
(should match .font-large-5)

All H6 Headings
(should match .font-large-6)

Text Styles

.text-style-italic

.text-style-italic - Italics for any text as long your font supports it

.text-style-strikethrough

.text-style-strikethrough - Strikethrough for any text as long your font supports it

.text-style-underline

.text-style-underline - Underline for any text as long your font supports it

.text-style-overline

.text-style-overline - Overline for any text as long your font supports it

Text Weights

.text-weight-thin

.text-weight-thin - Thin weight for any text as long your font supports it

.text-weight-extra-light

.text-weight-extra-light - Extra Light weight for any text as long your font supports it

.text-weight-light

.text-weight-light - Light weight for any text as long your font supports it

.text-weight-normal

.text-weight-normal - Normal weight for any text as long your font supports it

.text-weight-medium

.text-weight-medium - Medium weight for any text as long your font supports it

.text-weight-semi-bold

.text-weight-semi-bold - Semi-Bold weight for any text as long your font supports it

.text-weight-bold

.text-weight-bold - Bold weight for any text as long your font supports it

.text-weight-extra-bold

.text-weight-extra-bold - Extra Bold weight for any text as long your font supports it

.text-weight-black

.text-weight-black - Black weight for any text as long your font supports it

Text Transform

.text-transform-none

.text-transform-none - Prevents the case of all characters from being changed

.text-transform-capitalize

.text-transform-capitalize - Converts the first letter of each word to uppercase

.text-transform-uppercase

.text-transform-uppercase - Converts all characters to uppercase

.text-transform-lowercase

.text-transform-lowercase - Converts all characters to lowercase

Text Colors

.color-text-inherit

.color-text-black

.color-text-darkblue

.color-text-gray

.color-text-white

Background Colors

.color-background-white

.color-background-black

.color-background-gray

Text Align

.text-align-left

.text-align-center

.text-align-right

.text-align-justify

Floats and Clears

.float--none

.float--left

float--right

.clear--none

.clear--left

.clear--right

.clear--both

Flex Box
(box wrapper, not the text)

.flex--start

.flex--center

.flex--center-sm

.flex--end

.flex--space-between

.flex--vertical

.flex--space-around

.flex--v-start

.flex--v-center

.flex--v-end

.flex--v-stretch

.flex--v-baseline

.flex--sm-vertical

.flex--reverse

This should show first

.flex--sm-reverse

This should show first in mobile

Rich Text

You might want to change the H1-H6 settings for stylistic or SEO purposes.

Spacing between elements is controlled in the component called "Gigantic - Style - Rich Text"

.text-rich-text

This rich text has a class of .text-rich-text

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

All Blockquotes. Blockquote sample, 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.

All Links

All bolds

All italics

Unordered List Item 1
Unordered List Item 2
Unordered List Item 3
Unordered List Item 4
Unordered List Item 5

Ordered List Item 1
Ordered List Item 2
Ordered List Item 3
Ordered List Item 4
Ordered List Item 5

This is a sample image for the style guide — Image caption text

Buttons

Button - Primary

Button - Secondary

Button - Tertiary

Misc Elements

NOTE: we prefer to use lists inside of Rich Text elements to make them easier to manage

Unordered List Item 1
Unordered List Item 2
Unordered List Item 3

Ordered List Item 1
Ordered List Item 2
Ordered List Item 3

Text inside of a link block

Form Elements

NOTE: If the site will use HubSpot forms, style them in the file "HubSpot Components." Changes to the Webflow form components won't affect HubSpot fields

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Margin Bottom Spacing Wrappers

.margin-bottom-xl

Desktop:
Mobile:

.margin-bottom-lg

Desktop:
Mobile:

.margin-bottom-med

Desktop:
Mobile:

.margin-bottom-sm

Desktop:
Mobile:

.margin-bottom-xs

Desktop:
Mobile:

.cta-wrapper.margin-sm

Desktop:
Mobile:

.cta-wrapper.margin-lg

Desktop:
Mobile:

Vertical Spacers
(they invisible)

.spacer-micro