Typography

Fonts

Pictura

Primary

Type: Serif

Weights: 400, 700

Source: https://stephenfrenchjr.gumroad.com/l/Pictura

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings

Element

H6 Headings

Element

Class

Body

p-24

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

p-20

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

paragraph

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

u-font-sans

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.

eyebrow

Lorem Ipsum

All Ordered Lists

Example Ordered List
Example Ordered List

All Unordered Lists

Example Unordered List
Example Unordered List

Weights

u-weight-thin

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

u-weight-extralight

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

u-weight-light

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

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.

u-weight-extrabold

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

u-weight-black

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

Truncation

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est enim incididunt Lorem consequat ex est consequat veniam id labore. Quis eiusmod deserunt culpa. Fugiat nisi culpa est occaecat.

1 -Line Clamp

u-clamp

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est enim incididunt Lorem consequat ex est consequat veniam id labore. Quis eiusmod deserunt culpa. Fugiat nisi culpa est occaecat.

2-Line Clamp

u-clamp

cc-2

Irure deserunt ipsum laborum elit enim. Qui mollit mollit est enim incididunt Lorem consequat ex est consequat veniam id labore. Quis eiusmod deserunt culpa. Fugiat nisi culpa est occaecat.

3-Line Clamp

u-clamp

cc-3

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

Color

Background

Primary

#0e3aeb

u-bg-primary

Black

#000000

u-bg-black

White

#ffffff

u-bg-white

Dark (Teal 900)

#ffffff

u-bg-dark

Brown

#ffffff

u-bg-brown

Green 300

#ffffff

u-bg-green-300

Gradient - Light/Dark

#ffffff

u-bg-gradient-light-dark

Gradient - Dark/Light

#ffffff

u-bg-gradient-dark-light

Text

Black

#000000

u-color-black

Neutral 700

#000000

u-color-neural-700

Neutral 500

#000000

u-color-neutral-500

Neutral 100

#000000

u-color-neutral-100

White

#FFFFFF

u-color-white

Teal 300

#FFFFFF

u-color-teal-300

Green 100

#FFFFFF

u-color-green-100

Teal 500

#FFFFFF

u-color-teal-500

Teal 900

#FFFFFF

u-color-teal-300

Green 900

#FFFFFF

u-color-green-900

Green 700

#FFFFFF

u-color-green-700

Green 500

#FFFFFF

u-color-green-500

Green 300

#FFFFFF

u-color-green-300

Brown 500

#FFFFFF

u-color-teal-300

Brown 900

#FFFFFF

u-color-teal-300

Components

Buttons

Button

Default

btn

Button

Default + Icon

btn

Button

Secondary

btn

cc-secondary

Button

Secondary + Icon

btn

cc-secondary

Button

Default Light

btn

cc-light

Button

Default Light + Icon

btn

cc-light

Button

Secondary Light

btn

cc-secondary

cc-light

Button

Secondary Light + Icon

btn

cc-secondary

cc-light

Text

Text Link

All Links

Forms

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Images

Default Images

image

Aspect Ratio: Widescreen

16 x 9

u-aspect-widescreen

Aspect Ratio: Landscape

3 x 2

u-aspect-landscape

Aspect Ratio: Square

1 x 1

u-aspect-square

Aspect Ratio: Portrait

2 x 3

u-aspect-portrait

Aspect Ratio: Phonescreen

2 x 3

u-aspect-phonescreen

Card

Default

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

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

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 (same font size as paragraph-1.25)

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

Inline code

^Superscript

_Subscript

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.

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.

What is Human Trafficking?

Learn More

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;

Flexbox Direction

u-d-flex

cc-horizontal

u-d-flex

cc-vertical

u-d-flex

cc-wrap

Flexbox Gap

u-d-flex

cc-gap-default

u-d-flex

cc-gap-4

u-d-flex

cc-gap-8

u-d-flex

cc-gap-16

u-d-flex

cc-gap-20

u-d-flex

cc-gap-24

u-d-flex

cc-gap-32

u-d-flex

cc-gap-40

u-d-flex

cc-gap-48

u-d-flex

cc-gap-56

Flexbox Alignment Horizontal

u-d-flex

cc-horizontal

cc-left-top

u-d-flex

cc-horizontal

cc-left-center

u-d-flex

cc-horizontal

cc-left-bottom

u-d-flex

cc-horizontal

cc-left-stretch

u-d-flex

cc-horizontal

cc-center-top

u-d-flex

cc-horizontal

cc-center-center

u-d-flex

cc-horizontal

cc-center-bottom

u-d-flex

cc-horizontal

cc-center-stretch

u-d-flex

cc-horizontal

cc-right-top

u-d-flex

cc-horizontal

cc-right-center

u-d-flex

cc-horizontal

cc-right-botom

u-d-flex

cc-horizontal

cc-right-stretch

u-d-flex

cc-horizontal

cc-between-top

u-d-flex

cc-horizontal

cc-between-center

u-d-flex

cc-horizontal

cc-between-bottom

u-d-flex

cc-horizontal

cc-right-stretch

Flexbox Alignment Vertical

u-d-flex

cc-vertical

cc-left-top

u-d-flex

cc-vertical

cc-left-center

u-d-flex

cc-vertical

cc-left-bottom

u-d-flex

cc-vertical

cc-left-stretch

u-d-flex

cc-vertical

cc-center-top

u-d-flex

cc-vertical

cc-center-center

u-d-flex

cc-vertical

cc-center-bottom

u-d-flex

cc-vertical

cc-center-between

u-d-flex

cc-vertical

cc-right-top

u-d-flex

cc-vertical

cc-right-center

u-d-flex

cc-vertical

cc-right-botom

u-d-flex

cc-vertical

cc-right-stretch

u-d-flex

cc-vertical

cc-stretch-top

u-d-flex

cc-vertical

cc-stretch-center

u-d-flex

cc-vertical

cc-stretch-bottom

u-d-flex

cc-vertical

cc-stretch-bottom

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

u-minh-100svh

min-height: 100svh;

Helpers

u-link-cover

Multiple properties

u-z-index-1

Multiple properties

u-sr-only

Multiple properties

u-border

Creates a 100% width, 1px height line.

u-border

cc-vertical

Creates a 100% height, 1px width line.

u-events-none

Sets Events to none.

u-invisible

visibility:hidden
Object takes up room in the DOM and the canvas but is invisible. (Invisible object below)

Invisible object

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

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

Other columns modifiers

Shrink Column

col

col-shrink

col

Gutterless Column

row

row-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters