Effects

Structure Classes

Style Guide

Typography

HTML Headings Tags
HTML tags define default Heading styles.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

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

u-heading-style-h1

Heading-style-h1

u-heading-style-h2

Heading-style-h2

u-heading-style-h3

Heading-style-h3

u-heading-style-h4

Heading-style-h4

u-heading-style-h5

Heading-style-h5

u-heading-style-h6

Heading-style-h6

Other HTML Tags
HTML tags define default text styles.

All Paragraphs

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.

All Links

All Block Quotes

Block Quote

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

No bullet list
No bullet list

All Ordered Lists

No bullet list
No bullet list
No bullet list

Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.

u-text-size-large

u-text-size-medium

u-text-size-regular

u-text-size-small

u-text-size-tiny

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

u-text-weight-bold

u-text-weight-bold (700)

u-text-weight-semibold

u-text-weight-semibold (600)

u-text-weight-medium

u-text-weight-medium (500)

u-text-weight-normal

u-text-weight-normal (400)

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

u-text-style-italic

u-text-style-strikethrough

u-text-style-allcaps

u-text-style-nowrap

u-text-style-quote

u-text-style-link

u-text-style-muted

u-text-style-tagline

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

u-text-align-left

u-text-align-center

u-text-align-right

Rich Text

u-text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

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.

This is a link inside of a rich text

List item
List item
List item

List item
List item
List item

Colors

Color Schemes
Manage your colors easily with global color schemes simply adding the color scheme class to the section you want it applied to.

u-color-scheme-1

Scheme 1

background

text

Text Color

accent

alternate

u-color-scheme-2

Scheme 1

background

text

Text Color

accent

alternate

Text Colors
Assign text colors to specific elements by choosing it from here

u-text-color-primary

Primary

u-text-color-secondary

Secondary

u-text-color-accent

Accent

u-text-color-light

Light

u-text-color-black

Black

u-text-color-white

White

UI Elements

Buttons

button

Button

button

is-small

Button

button

is-secondary

Button

button

is-secondary

is-small

Button

button

is-link

Button

To use on a dark background, simple use the add-on class is-alternate

button

is-alternate

Button

button

is-alternate

is-small

Button

button

is-secondary

is-alternate

Button

button

is-secondary

is-small

is-alternate

Button

button

is-link

is-alternate

Button

Buttons With Icons

button

is-icon

Button

button

is-small

is-icon

Button

button

is-secondary

is-icon

Button

button

is-secondary

is-small

is-icon

Button

button

is-link

is-icon

Button

button

is-icon-only

button

is-icon

is-alternate

Button

button

is-small

is-icon

is-alternate

Button

button

is-secondary

is-icon

is-alternate

Button

button

is-secondary

is-small

is-icon

is-alternate

Button

button

is-link

is-icon

is-alternate

Button

button

is-icon-only

is-alternate

Cards

card_text-wrapper

Card

Text

stat-card

Card

Text

Card

stat-card_wrapper

Card

Text

Card

stat-card_wrapper

is-darker

Card

Text

Card

stat-card_group

Card

Text

Card

Text

Card

Text

Card

Other UI Elements

tab-link

category-filter-link

slider-arrow

Tags
Linkable labels that categorize or highlight information on cards, products and posts

tag

Tag

tag

is-text

Tag

tag

is-alternate

Tag

tag

is-text

is-alternate

Tag

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

To use Forms on a dark background, simply use the add-on class is-alternate

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons (Image)

u-icon-height-xxsmall

u-icon-height-xsmall

u-icon-height-small

u-icon-height-medium

u-icon-height-large

u-icon-height-xlarge

u-icon-height-custom1

u-icon-1x1-xxsmall

u-icon-1x1-xsmall

u-icon-1x1-small

u-icon-1x1-medium

u-icon-1x1-large

u-icon-1x1-xlarge

u-icon-1x1-custom1

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

u-icon-embed-xxsmall

u-icon-embed-xsmall

u-icon-embed-small

u-icon-embed-medium

u-icon-embed-large

u-icon-embed-xlarge

u-icon-embed-custom1

Radius

Large
‍Large radius is applied to elements which are 1 or 2 columns in width.

Medium
‍Medium radius is applied to elements which are between 2 and 3 columns in width.

Small
‍Small radius is applied to elements which are smaller than 4 columns in width.

Effects

Box Shadows
‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.

u-shadow-xxsmall

u-shadow-xsmall

u-shadow-small

u-shadow-medium

u-shadow-large

u-shadow-xlarge

u-shadow-xxlarge

Structure Classes

Defined and flexible core structure we can use on all or most pages.

u-page-wrapper

u-main-wrapper

u-container-small

u-container-medium

u-container-large

u-padding-global

u-padding-section-xsmall

u-padding-section-small

u-padding-section-medium

u-padding-section-large

u-padding-section-xlarge

u-button-group

Max Widths

Use the max-width CSS property to contain inner content to a maximum width.

u-max-width-full

u-max-width-full-tablet

u-max-width-full-mobile-landscape

u-max-width-full-mobile-portrait

u-max-width-xxlarge

80 Rem (1,280px)

u-max-width-xlarge

64 Rem (1,024px)

u-max-width-large

48 Rem (768px)

u-max-width-medium

35 Rem (560px)

u-max-width-small

30 Rem (480px)

u-max-width-xsmall

25 Rem (400px)

u-max-width-xxsmall

20 Rem (320px)

Paddings

Direction Classes

u-padding-bottom

u-padding-top

u-padding-vertical

u-padding-horizontal

u-padding-left

u-padding-right

Size Classes

u-padding-0

u-padding-tiny

0.25 Rem (4px)

u-padding-xxsmall

0.5 Rem (8px)

u-padding-xsmall

1 Rem (16px)

u-padding-small

1.5 Rem (24px)

u-padding-medium

2 Rem (32px)

u-padding-large

3 Rem (48px)

u-padding-xlarge

4 Rem (64px)

u-padding-xxlarge

5 Rem (80px)

u-padding-huge

6 Rem (96px)

u-padding-xhuge

7 Rem (112px)

u-padding-xxhuge

9 Rem (144px)

u-padding-custom1

This will be used for the hero section, due to more space needed on the bottom side.

u-padding-custom2

u-padding-custom3

Margins

Direction Classes

u-margin-bottom

u-margin-top

margin-vertical

u-margin-horizontal

u-margin-left

u-margin-right

Size Classes

u-margin-0

u-margin-tiny

0.25 Rem (4px)

u-margin-xxsmall

0.5 Rem (8px)

u-margin-xsmall

1 Rem (16px)

u-margin-small

1.5 Rem (24px)

margin-medium

2 Rem (32px)

u-margin-large

3 Rem (48px)

u-margin-xlarge

4 Rem (64px)

u-margin-xxlarge

5 Rem (80px)

u-margin-huge

6 Rem (96px)

u-margin-xhuge

7 Rem (112px)

u-margin-xxhuge

9 Rem (144px)

u-margin-custom1

u-margin-custom2

u-margin-custom3

Spacers

Unified spacer system for the project.

u-spacer-tiny

0.25 Rem (4px)

u-spacer-xxsmall

0.5 Rem (8px)

u-spacer-xsmall

1 Rem (16px)

u-spacer-small

1.5 Rem (24px)

u-spacer-medium

2 Rem (32px)

u-spacer-large

3 Rem (48px)

u-spacer-xlarge

4 Rem (64px)

u-spacer-xxlarge

5 Rem (80px)

u-spacer-huge

6 Rem (96px)

u-spacer-xhuge

7 Rem (112px)

u-spacer-xxhuge

9 Rem (144px)

Utility Classes

Useful utility classes we like to use in most of our projects to build faster.

u-hide

This element is hidden

u-hide-tablet

u-hide-mobile-portrait

u-hide-mobile-landscape

u-overflow-visible

u-overflow-hidden

u-overflow-auto

u-overflow-scroll

u-pointer-events-auto

u-pointer-events-none

u-layer

u-spacing-clean

u-align-center

u-z-index-1

u-z-index-2

u-display-inlineflex

u-margin-top-auto

u-aspect-ratio-square

u-aspect-ratio-portrait

u-aspect-ratio-landscape

u-aspect-ratio-widescreen

u-inherit-color

u-absolute