Structure Classes

Page Wrapper

Main Wrapper

Padding Horizontal Global

Padding Vertical 3rem

Padding Vertical 5rem

Padding Vertical 8rem

Container 1440px

Container 1120px

Container 928px

Layout Grid Classes

General starting point grid layout classes

Grid 1 Column

Grid 2 Column

Grid 3 Column

Grid 4 Column

Spacers

Unified spacer system for vertical spacing.

Spacer 0.5rem

Spacer 1rem

Spacer 1.5rem

Spacer 2rem

Spacer 2.5rem

Spacer 3rem

Spacer 3.5rem

Spacer 4rem

Spacer 4.5rem

Spacer 5rem

Margins

Utility spacing system - margin classes. [Margin Direction] + [Margin Size].

Direction Classes

Margin Bottom

Margin Top

Margin Vertical

Margin Horizontal

Margin Left

Margin Right

Size Classes

Margin 0

Margin 0.5rem

Margin 0.75rem

Margin 1rem

Margin 1.5rem

Margin 2rem

Margin 2.5rem

Margin 3rem

Margin 3.5rem

Margin 4rem

Margin 4.5rem

Margin 5rem

Paddings

Utility spacing system - padding classes. [Padding Direction] + [Padding Size].

Direction Classes

Padding Bottom

Padding Top

Padding Vertical

Padding Horizontal

Padding Left

Padding Right

Size Classes

Padding 0

Padding 0.5rem

Padding 0.75rem

Padding 1rem

Padding 1.5rem

Padding 2rem

Padding 2.5rem

Padding 3rem

Padding 3.5rem

Padding 4rem

Padding 4.5rem

Padding 5rem

Colors

General Color Classes

Background Colors

Background Primary 1

Background Primary 2

Background Primary 3

Background Secondary 1

Background Secondary 2

Background Neutral 1

Background Neutral 2

Background Neutral 3

Background Neutral 4

Background Neutral 5

Background Neutral 6

Background Neutral 7

Background Neutral 8

Background Neutral 9

Background Neutral 0

Background Black

Gradient Primary

Text Colors

Text Primary 1

Text Primary 1

Text Primary 2

Text Primary 2

Text Primary 3

Text Primary 3

Text Secondary 1

Text Secondary 1

Text Secondary 1

Text Primary 2

Text Neutral 1

Text Neutral 1

Text Neutral 2

Text Neutral 2

Text Neutral 3

Text Neutral 3

Text Neutral 4

Text Neutral 4

Text Neutral 5

Text Neutral 5

Text Neutral 6

Text Neutral 6

Text Neutral 7

Text Neutral 7

Text Neutral 8

Text Neutral 8

Text Neutral 9

Text Neutral 9

Text Neutral 0

Text Neutral 0

Text Black

Text Black

Headings

General Heading Classes

H1

Empowering your success in the tech industry

Heading Style H1

Empowering your success in the tech industry

H2

Empowering your success in the tech industry

Heading Style H2

Empowering your success in the tech industry

H3

Empowering your success in the tech industry

Heading Style H3

Empowering your success in the tech industry

H4

Empowering your success in the tech industry

Heading Style H4

Empowering your success in the tech industry

H5

Empowering your success in the tech industry

Heading Style H5

Empowering your success in the tech industry

H6

Empowering your success in the tech industry

Heading Style H6

Empowering your success in the tech industry

Other HTML Tags

HTML tags define default text styles.

All Paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All Quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Theme Heading Classes

Display XXL

Empowering your success in the tech industry

Display XL

Empowering your success in the tech industry

Heading L

Empowering your success in the tech industry

Heading M

Empowering your success in the tech industry

Heading S

Empowering your success in the tech industry

Heading XS

Empowering your success in the tech industry

Heading XXS

Empowering your success in the tech industry

Theme Text Classes

Body XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et cursus orci. Suspendisse potenti.

Body L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et cursus orci. Suspendisse potenti.

Body M

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et cursus orci. Suspendisse potenti.

Body S

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et cursus orci. Suspendisse potenti.

Body XS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et cursus orci. Suspendisse potenti.

Eyebrow

Your tech partner

Quote

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

CTA

Learn more

CTA S

Learn more

Bullet List

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

General Text Styles

Text Strikethrough

Text Strikethrough

Text Italic

Text Italic

Text Muted

Text Muted

Text All Caps

Text All Caps

Text Nowrap

Text Nowrap

General Text Weights

Text Weight 800

Text Weight 800

Text Weight 700

Text Weight 700

Text Weight 600

Text Weight 600

Text Weight 500

Text Weight 500

Text Weight 400

Text Weight 400

Text Weight 300

Text Weight 300

Text Alignment

Text Align Left

Text Align Left

Text Align Center

Text Align Center

Text Align Right

Text Align Right

Image Classes

Image

Image 4x3

Image 16x9

Image 21x9

Image Avatar

Image BG Cover

Buttons

Button class system.

Button Primary

Join the waitlist

Button Primary (Hovered)

Join the waitlist

Button Primary (Active)

Join the waitlist

Button Primary White

Join the waitlist

Button Primary White (Hovered)

Join the waitlist

Button Primary White (Active)

Join the waitlist

Button Secondary

Button Secondary (Hovered)

Button Secondary (Active)

Button Secondary White

Button Secondary White (Hovered)

Button Secondary White (Active)

Arrow Link

Arrow Link (Hovered)

Arrow Link (Active)

Shadows

Dropshadow 1

Dropshadow 2

Dropshadow Purple

Colored Icons

Use the Icon class with SVG embed - if SVG does not contain set fill color, use variable-based colors to set SVG color:
Icon Primary 1, Icon Primary 2, Icon Secondary 1, Icon Secondary 2, Icon Neutral 0 - 9 and Icon Black

Icon | Icon [Variable Name]

Icons with Background Colors

Use the Icon BG class with SVG embed - if SVG does not contain set background colour, use variable-based colors to set background color:
Icon BG Primary 1, Icon BG Primary 2, Icon BG Secondary 1, Icon BG Secondary 2, Icon BG Neutral 0 - 9 and Icon BG Black
Can be used in conjunction with SVG containing set fill colors.

Icon BG | Icon BG [Variable Name]

Featured Icons

Use the Icon Featured class with an SVG embed to show the stylized gradient border.

Icon Featured

Using SVG Images - must be wrapped in element with class "Icon Featured"

Using SVG Embeds - can use class "Icon Featured" directly on embed.

Social Media Icons

Use the Icon Social class with an SVG embed for stylized social icons.

Icon Social

Webflow Elements

Form Component

Example of a form component.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text Content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Utility Classes

Hide

This element is hidden

Hide Tablet

Hide Mobile Portrait

Hide Mobile Landscape

Overflow Visible

Overflow Hidden

Overflow Auto

Overflow Scroll