Prevent style clean up

This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.

Team Headshot

team_headshot

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Skillset Rich Text Block

skillset_rtb

CTA btn Clicked

Class added with JavaScript, when the main CTA button is clicked and after a spline animation runs.

btn
cc-cta-clicked

Slide Up Animations with the u-slide-up class

Use the u-slide-up class on the section to trigger the scroll-based utility animation. Then use the u-slide-1, u-slide-2, u-slide-3 etc... classes to set the order of appearance. This method ensures consistency across the fade-in animations for every element.

Components

Interactive

Buttons

Start playing

Button
Primary
GSAP-Color Animation

GSAP animation added in the Footer Code.
Custom CSS added in the Global Styles component.

btn
[data-button-gsap-color=""]
Start playing
​

Button
Primary
GSAP-Color Animation
Icon Right

GSAP animation added in the Footer Code.
Custom CSS added in the Global Styles component.

btn
[data-button-gsap-color=""]
​
Start playing

Button
Primary
GSAP-Color Animation
Icon Left

GSAP animation added in the Footer Code.
Custom CSS added in the Global Styles component.

btn
[data-button-gsap-color=""]
Start playing

Button
Secondary
GSAP-Color Animation

GSAP animation added in the Footer Code.
Custom CSS added in the Global Styles component.

btn
[data-button-gsap-color=""]
​
Start playing

Button
Secondary
GSAP-Color Animation
Icon Right

GSAP animation added in the Footer Code.
Custom CSS added in the Global Styles component.

btn
[data-button-gsap-color=""]
Start playing
​

Button
Secondary
GSAP-Color Animation
Icon Left

GSAP animation added in the Footer Code.
Custom CSS added in the Global Styles component.

btn
[data-button-gsap-color=""]
Start playing

Button
Primary
Color-Blob Animation

Custom CSS animation added in the Global Styles component

button-color-blob
Start playing

Button
Secondary
Color-Blob Animation

Custom CSS animation added in the Global Styles component

button-color-blob
Text

All Links

Default link style without hover animation.

All Links
View all
View all

Text Link

Custom link style with a hover animation.

u-text-link

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Accordion

Modal

This uses an HTML <dialog> to get all of the accessibility benefits for free. The modal should always come before the button that opens it. To update the modal contents, select it in the navigator, and add any value (ie "1") to open attribute in the element settings.

This is a modal!

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.

Button

Content

Breadcrumb

Eyebrow

Lorem ipsum

Icon

​

1 EM

icon
Icon
​

Small

icon
Icon
SM
​

Medium

icon
Icon
MD
​

Large

icon
Icon
LG

Image

Inherit

Image
Inherit

16x9

Image
16x9

4x3

Image
4x3

1x1

Image
1x1

Card

Simple

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

​

Actionable

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

Button

Link cover

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

Learn more

Heading

Heading

Rich Text

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.

Global

Nav Banner

Mast — a CSS framework for Webflow

Nav

Footer

Build mode

Section

Spacer

Grid

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.

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.

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.