Typography

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings

Element

H6 Headings

Element

Class

Body

paragraph

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

p-14

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

p-18

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

eyebrow

Lorem Ipsum

Product Services

One AI Agent forIntake, Quoting and Proposals

asdacsd acsad

Product Services

One AI Agent forIntake, Quoting and Proposals

eewqwqdsas

Button

All Ordered Lists

Example Ordered List
Example Ordered List

All Unordered Lists

Example Unordered List
Example Unordered List

Weights

u-weight-regular

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

u-weight-medium

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

u-weight-semibold

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

u-weight-bold

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

Text Wrap

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est.

text-wrap: balance;

u-wrap-balance

Balances lines of text. Cannot be used with content greater than 4 lines.

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est.

text-wrap: wrap;

Default Wrap

u-wrap-none

Utilities

Margin

Top

u-mt-0

margin-top: 0;

u-mt-1

margin-top: 1rem;

u-mt-1.25

margin-top: 1.25rem;

u-mt-1.5

margin-top: 1.5rem;

u-mt-2

margin-top: 2rem;

u-mt-2

margin-top: 2.5rem;

u-mt-3

margin-top: 3rem;

u-mt-auto

margin-top: auto;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-1

margin-bottom: 1rem;

u-mb-1.25

margin-bottom: 1.25rem;

u-mb-1.5

margin-bottom: 1.5rem;

u-mb-2

margin-bottom: 2rem;

u-mb-2.5

margin-bottom: 2.5rem;

u-mb-3

margin-bottom: 3rem;

Other

u-m-0

margin: 0;

u-mlr-auto

margin: 0 auto; (centers element))

u-mr-1

margin-right: 1rem;

u-ml-1

margin-left: 1rem;

Padding

Top

u-pt-0

padding-top: 0;

u-pt-1

padding-top: 1rem;

u-pt-2

padding-top: 2rem;

u-pt-3

padding-top: 3rem;

Bottom

u-pb-0

padding-bottom: 0;

u-pb-1

padding-bottom: 1rem;

u-pb-2

padding-bottom: 2rem;

u-pb-3

padding-bottom: 3rem;

Other

u-p-0

padding: 0;

u-p-1

padding: 1rem;

Alignment

u-ta-left

text-align: left;

u-ta-center

text-align: center;

u-ta-right

text-align: right;

Overflow

u-overflow-clip

overflow: clip;

u-overflow-visible

overflow: visible;

Display

u-lg-hide

display: none; on Desktop and below.

u-lg-only

Display only on Desktop.

u-md-hide

display: none; on Tablet and below.

u-md-only

Display only on Tablet.

u-sm-hide

display: none; on Mobile Landscape and below.

u-sm-only

Display only on Mobile Landscape.

u-xs-hide

display: none; on Mobile Portrait and below.

u-xs-only

Display only on Mobile Portrait.

u-d-block

display: block;

u-d-flex

display: flex;

u-d-inline-flex

display: inline-flex;

u-d-inline

display: inline

Position

u-p-relative

position: relative;

u-p-absolute

position: absolute;

u-p-absolute

cc-full

position: absolute;
top: 0; bottom: 0; left: 0; right: 0;

u-p-sticky

position: sticky;

u-p-sticky

cc-top

position: sticky;
top: 0;

u-p-sticky

cc-bottom

position: sticky;
bottom: 0;

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

u-minh-100svh

min-height: 100svh;

Icons

u-icon

cc-8

Apply to SVG layer on icons. Append combo classes for sizing.

u-icon

cc-16

u-icon

cc-24

u-icon

cc-32

u-icon

cc-40

u-icon

cc-48

Layout

Section

section

Container

container

cc-mw-none

Grid

col

u-col-pad-0

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