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

HTML Heading Tags

HTML tags define default Heading styles.
H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H3

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H4

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
H6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Other HTML Tags

HTML tags define default Heading 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
Text Link
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. Sample text is being used as a placeholder for real text.
All ordered lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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.

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.SM
text-size-tiny
Text Sample text is being used as a placeholder for real text that is normally present.SM

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-style-quote
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

Buttons

Component, text style and size variations
button
is-small
Button
button
Button
button
is-large
Button
button
is-secondary
Secondary Button
button
is-text
Text Button
button
is-icon
is-secondary
See how we work
button
is-circle
Link

Badges

Combine with other components to display metadata and icons.
badge
Default
Depreciated
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-bottom

Card with image bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

card
is-horizontal

Card with image left

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
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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.
alt text example

ub_form_input
is-small
ub_form_input
ub_form_input
is-large
ub_form_input
is-text-area-small
ub_form_input
is-text-area
ub_form_input
is-laris-text-area-largege
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
* Input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text Elements in a Blog Article

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a caption on an image
This is an alt text

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Selectables

Checkboxes, Radios and Select dropdowns
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.