Styles

Typography

Fonts

Canela

Headings

Type: Serif (Italic)

Weights: Normal (400), Medium (500)

Coporative Sans

Small Headings + Body

Type: San 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

h1

Class

h2

Class

h3

Class

h4

Class

h5

Class

h6

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

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

<div>example code block here</div>

‍

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Color

Background

Primary

Primary 100

#e8f7ec

u-bg-primary-100

Primary 200

#c6eccf

u-bg-primary-200

Primary 300

#9fe0b0

u-bg-primary-300

Primary 400

#6fd08d

u-bg-primary-400

Primary 500

#8de971

u-bg-primary-500

Primary 600

#6cc955

u-bg-primary-600

Primary 700

#4fa63f

u-bg-primary-700

Primary 700

#3a7c2f

u-bg-primary-800

Secondary

Secondary 100

#f1eafa

u-bg-secondary-100

Secondary 200

#ddd0f2

u-bg-secondary-200

Secondary 300

#c3aee8

u-bg-secondary-300

Secondary 400

#b79fe3

u-bg-secondary-400

Secondary 500

#ad96dc

u-bg-secondary-500

Secondary 600

#8e74c7

u-bg-secondary-600

Secondary 700

#6f58a8

u-bg-secondary-700

Neutral

Neutral 1000

#030304

u-bg-neutral-1000

Neutral 900

#1a1a1a

u-bg-neutral-900

Neutral 800

#2f2b2d

u-bg-neutral-800

Neutral 700

#3f3e3c

u-bg-neutral-700

Neutral 600

#5f5e5b

u-bg-neutral-600

Neutral 500

#888680

u-bg-neutral-500

Neutral 400

#a8a8a8

u-bg-neutral-400

Neutral 300

#cfcfcf

u-bg-neutral-300

Neutral 200

#e4e4e4

u-bg-neutral-200

Neutral 100

#f1f1f1

u-bg-neutral-100

Neutral 50

#f8f8f8

u-bg-neutral-50

Neutral

#ffffff

u-bg-white

Text

Aa

Primary

#8de971

u-text-primary

Aa

Black

#030304

u-text-black

Aa

Muted

#888680

u-text-muted

Aa

White

#FFFFFF

u-text-white

Shadows

Shadow XS

u-shadow-xs

Shadow SM

u-shadow-sm

Shadow MD

u-shadow-md

Shadow LG

u-shadow-lg

Shadow XL

u-shadow-xl

Primary Glow

u-shadow-pg

Secondary Glow

u-shadow-sg

Theme

Mode

Aa

Neutral

u-mode-dark

Aa

Neutral 50

u-mode-light

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

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-3

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.

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-d-contents

display: contents;

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

u-full-height-center

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-content-center

col

row

row-align-end

col

row

row-content-end

col

row

row-content-between

col

Justify columns

row

row-justify-end

col

row

row-justify-center

col

row

row-justify-around

col

row

row-justify-between

col

Offset columns

col

col-lg-offset-1

col

col-lg-offset-2

col

col-lg-offset-3

col

col-lg-offset-4

col

col-lg-offset-5

col

col-lg-offset-6

col

col-md-offset-0

col

col-md-offset-1

col

col-md-offset-2

col

col-md-offset-3

col

col-md-offset-4

col

col-md-offset-5

col

col-md-offset-6

col

col-sm-offset-0

col

col-sm-offset-1

col

col-sm-offset-2

col

col-sm-offset-3

col

col-sm-offset-4

col

col-sm-offset-5

col

col-sm-offset-6

col

col-xs-offset-0

col

col-xs-offset-1

col

col-xs-offset-2

col

col-xs-offset-3

col

col-xs-offset-4

col

col-xs-offset-5

col

col-xs-offset-6

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

Button gap (set from Grid / Gap Button variable)

row

row-gap-button

No gap

row

row-gap-0

col

Other column modifiers

Shrink column

col

col-shrink

col

Contained column

col

col-lg-contain-left

col

col-lg-contain-right