A flexible component library
Style Guide
Colors
Primaries and grays
primary
secondary
black
white
light-gray
success
warning
error
Gray 1
Gray 2
Gray 3
Gray 4
Gray 5
Gray 6
Gray 7
Gradients
Gradients are based on the primary colors
gradient-1
gradient-2
gradient-3
gradient-4
gradient-5
gradient-6
gradient-7
Shadows
Gradients are based on the primary colors
shadow-xs
shadow-small
shadow-medium
shadow-large
Heading Styles
Heading classes when typography style doesn't match the default HTML tag.
heading-display-xxl
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-xl
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-h1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-h2
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-h3
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-h4
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-h5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-display-h6
Kook of the day back dooSample text helps you understand how real text may look. Sample text is being used as a placeholder.ring blown out.
Text Sizes
text-size-xl
Sample text is being used as a placeholder for real text that is normally present.
text-size-large
Sample text is being used as a placeholder for real text that is normally present.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present.
text-size-regular (default)
Sample text is being used as a placeholder for real text that is normally present.
text-size-small
Text Sample text is being used as a placeholder for real text that is normally present.
text-size-tiny
Text Sample text is being used as a placeholder for real text that is normally present.
Text Styles
text-style-strikethrough
Sample text is being used as a placeholder for real text that is normally present.
text-style-italics
Sample text is being used as a placeholder for real text that is normally present.
text-style-muted
Sample text is being used as a placeholder for real text that is normally present.
text-style-allcaps
Sample text is being used as a placeholder for real text that is normally present.
text-style-nowrap
Sample text
text-style-link
Text Sample text is being used as a placeholder for real text that is normally present.
text-style-quote
Text Sample text is being used as a placeholder for real text that is normally present.
text-style-2lines
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 text-style-2lines
text-style-3lines
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 text-style-2lines
Text Weights
text-weight-xbold
Sample text is being used as a placeholder for real text that is normally present.
text-weight-bold
Sample text is being used as a placeholder for real text that is normally present.
text-weight-semibold
Sample text is being used as a placeholder for real text that is normally present.
text-weight-medium
Sample text is being used as a placeholder for real text that is normally present.
text-weight-normal
Sample text is being used as a placeholder for real text that is normally present.
text-weight-light
Sample text is being used as a placeholder for real text that is normally present.
Text Alignments
text-align-left
Sample text is being used as a placeholder for real text that is normally present.
text-align-center
Sample text is being used as a placeholder for real text that is normally present.
text-align-right
Sample text is being used as a placeholder for real text that is normally present.
Text Colors
Text Color 1
Text Color 2
Text Color 3
Text Color 4
Text Color 5
Text Color 6
Text Color 7
Text Gray 1
Text Gray 2
Text Gray 3
Text Gray 4
Text Gray 5
Text White
Badges
Combine with other components to display metadata and icons.
badge
Default
bg-color-success
badge
Default
Cards
Structural components for flexible layout of content.
card
card
card-body
card
bg-color-secondary
card
card-body
Card with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
card
is-horizontal
Card with image left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
card
is-bottom
Card with image bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Max-widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-left
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xl
padding-xxl
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xl
margin-xxl
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
Spacers
Unified spacer system for the project.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Avatars
Represent people through the interface.
avatar
avatar
is-large
avatar
is-overlap
Utility Systems
Utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-on
layer
overflow-scroll
spacing-clean
align-center
z-index-1
z-index-2
pointer-events-on
Webflow elements
Native Webflow elements with Client-First classes applied
form_component
text-rich-text
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.
Notice Element
Multi-purpose notifications panel for cookies, sales promotions, etc.
container-fixed-notice
Heading
This is some text inside of a div block.