Styles

Typography

Fonts

General Sans

Headings + Body

Type: Sans Serif

Weights: Normal (400), Medium (500)

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings

Element

H6 Headings

Element

Class

Body

paragraph-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

eyebrow

Lorem Ipsum

All Ordered Lists

Example Ordered List
Example Ordered List

All Unordered Lists

Example Unordered List
Example Unordered List

Color

Background

Primary

Orange

#d14424

u-bg-primary

Secondary

Yellow

#f8d47a

u-bg-yellow

Blue

#0073e6

u-bg-blue

Neutral

Black

#1d1c1a

u-bg-black

Dark Gray

#302f2c

u-bg-darkgray

Mid Gray

#888680

u-bg-midgray

Light Gray

#dfddd6

u-bg-lightgray

White

#ffffff

u-bg-white

Text

Primary

#d14424

u-text-primary

Black

#1d1c1a

u-text-black

Dark Gray

#302f2c

u-text-darkgray

Mid Gray

#888680

u-text-midgray

Light Gray

#dfddd6

u-text-lightgray

White

#FFFFFF

u-text-white

Modes

Base

u-mode-base

Invert

u-mode-invert

Accent 1

u-mode-accent1

Accent 2

u-mode-accent2

Utilities

Margin

Top

u-mt-0

margin-top: 0;

u-mt-xs

margin-top: 0.5em;

u-mt-sm

margin-top: 1em;

u-mt-md

margin-top: 2em;

u-mt-lg

margin-top: 3em;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-xs

margin-bottom: 0.5em;

u-mb-sm

margin-bottom: 1em;

u-mb-md

margin-bottom: 2em;

u-mb-lg

margin-bottom: 3em;

Other

u-m-0

margin: 0;

u-mlr-auto

margin: 0 auto; (centers element))

u-mt-auto

margin-top: auto;

u-mb-auto

margin-bottom: auto;

Padding

Top

u-pt-0

padding-top: 0;

Bottom

u-pb-0

padding-bottom: 0;

Other

u-p-0

padding: 0;

Text

Alignment

u-text-center

text-align: center;

u-text-right

text-align: right;

u-text-left

text-align: left;

Clamping

u-text-clamp-1

Multiple properties

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.

u-text-clamp-2

Multiple properties

u-text-clamp-3

Multiple properties

Wrapping

u-text-balance

text-wrap: balance;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

u-text-pretty

text-wrap: pretty;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Overflow

u-overflow-hidden

overflow: hidden;

u-overflow-visible

overflow: visible;

Display + position

u-d-none

display: none;

u-d-block

display: block;

u-d-flex

display: flex;

u-d-inline-flex

display: inline-flex;

u-position-relative;

position: relative;

u-position-sticky;

position: sticky;

Responsive modifiers

u-md-d-none

display: none; (Tablet down)

u-sm-d-none

display: none; (Mobile (L) down)

u-xs-d-none

display: none; (Mobile only)

u-md-d-block

display: block; (Tablet down)

u-sm-d-block

display: block; (Mobile (L) down)

u-xs-d-block

display: block; (Mobile only)

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

u-minh-100vh

min-height: 100vh;

Aspect ratio

u-aspect-1x1

Multiple properties

u-aspect-16x9

Multiple properties

u-aspect-4x3

Multiple properties

Helpers

u-img-cover

Multiple properties

u-link-cover

Multiple properties

u-z-index-1

Multiple properties

u-sr-only

Multiple properties

u-border

Multiple properties

Layout

Section

section

Container

container

Grid

col

Grid - Desktop

col

col-lg-1

col

col-lg-11

col

col-lg-2

col

col-lg-10

col

col-lg-3

col

col-lg-9

col

col-lg-4

col

col-lg-8

col

col-lg-5

col

col-lg-7

col

col-lg-6

col

col-lg-6

col

col-lg-12

Grid - Tablet

col

col-md-1

col

col-md-11

col

col-md-2

col

col-md-10

col

col-md-3

col

col-md-9

col

col-md-4

col

col-md-8

col

col-md-5

col

col-md-7

col

col-md-6

col

col-md-6

col

col-md-12

Grid - Mobile Landscape

col

col-sm-1

col

col-sm-11

col

col-sm-2

col

col-sm-10

col

col-sm-3

col

col-sm-9

col

col-sm-4

col

col-sm-8

col

col-sm-5

col

col-sm-7

col

col-sm-6

col

col-sm-6

col

col-sm-12

Grid - Mobile Portrait

col

col-xs-1

col

col-xs-11

col

col-xs-2

col

col-xs-10

col

col-xs-3

col

col-xs-9

col

col-xs-4

col

col-xs-8

col

col-xs-5

col

col-xs-7

col

col-xs-6

col

col-xs-6

col

col-xs-12

Align columns

row

row-align-center

col

row

row-align-end

col

Justify columns

row

row-justify-end

col

row

row-justify-center

col

row

row-justify-around

col

row

row-justify-between

col

Reorder columns

col

col-lg-first

col

col-md-first

col

col-sm-first

col

col-xs-first

col

col-lg-last

col

col-md-last

col

col-sm-last

col

col-xs-last

Gap modifiers

Medium gap (set from Grid Gap - MD variable)

row

row-gap-md

col

Small gap (set from Grid Gap - SM variable)

row

row-gap-sm

col

No gap

row

row-gap-0

col

Other columns modifiers

Shrink Column

col

col-shrink

col

Components

Interactive

Buttons

Button

Default

btn

Button

Default + Icon Right

btn

Button

Default + Icon Left

btn

Button

Secondary

btn

Button

Secondary

Button

Secondary + Icon Right

btn

Button

Secondary

Button

Secondary + Icon Left

btn

Button

Secondary

Text

Text Link

All Links

Forms

Thank you for your submission!

Oops! Something went wrong while submitting the form.

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.

Content

Breadcrumb

Eyebrow

Lorem ipsum

Icon

1 EM

icon

Icon

Small

icon

Icon

Medium

icon

Icon

Large

icon

Icon

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.

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

Nav

Footer

Build mode

Section

Grid

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.

Style Guide

Styles

Typography

Fonts

Headings + Body

Headings

Element

Element

Element

Element

Element

Element

Body

Color

Background

Primary

Orange

Secondary

Yellow

Blue

Neutral

Black

Dark Gray

Mid Gray

Light Gray

White

Text

Primary

Black

Dark Gray

Mid Gray

Light Gray

White

Modes

Base

Invert

Accent 1

Accent 2

Utilities

Margin

Top

Bottom

Other

Padding

Top

Bottom

Other

Text

Alignment

Clamping

Wrapping

Overflow

Display + position

Responsive modifiers

Size

Aspect ratio

Helpers

Layout

Section

Container

Grid

Grid - Desktop

Grid - Tablet

Grid - Mobile Landscape

Grid - Mobile Portrait

Align columns

Justify columns

Reorder columns

Gap modifiers

Medium gap (set from Grid Gap - MD variable)

Small gap (set from Grid Gap - SM variable)

No gap

Other columns modifiers

Shrink Column

Components

Interactive

Buttons

Default

Default + Icon Right

Default + Icon Left