Global Components
Content Components
Global / Eyebrow
Eyebrow
Global / Heading
Heading
Global / Paragraph
This is a paragraph within a rich text block.
Global / Content
Visual Components
Global / Background
Global / Visual
Global / Visual / Frame
Use this for images with extra whitespace
Global / Mockup
Basically "Global / Visual / Frame" with the ability to add multiple components
Global / Divider
Containers
.container
default
.container.is-full-m
Tablet
max-width: 100%;
.container.is-full-sm
Mobile
max-width: 100%;
Panels
.panel
default
.panel.is-full-sm
Border-radius and box-shadows are removed on mobile
Cards
Card / Base
Adds a background and border which can both be a color or gradient.
Component Utilities
[data-max-width]
Responsive Max Width
--max(-*) = Max Width
--max: Desktop >
--max-m: Tablet >
--max-sm: Mobile Landscape >
--max-xs: Mobile Portrait
[data-prop]
[data-prop-required]
Add this to elements within a component that need to be set to "display: none" if they are empty such as a text block with no content.
Accordion & Dropdowns
Dropdown
Dropdown
Accordion
Accordion Title
Tabs
CMS Filters
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Gradient Canvas Animation
Swiper
This is a quote swiper
Splide Slider
Card Slider: normal slider
This is a quote swiper
Quote Slider: marquee on desktop and slider on mobile
This is a quote swiper
Marquee
