Styles

Typography

Fonts

Sora

Headings + Body

Type: Sans Serif

Weights: Light (300) Normal (400), Medium (500)

Bebas
Neue

Headings

Type: Sans Serif

Weights: Normal (400)

Primary 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

Secondary Headings

h1-secondary

Class

h2-secondary

Class

h3-secondary

Class

Body

p-large

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

p-medium

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.

p-small

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

p-xsmall

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

Primary

#

u-bg-primary

Secondary

Yellow

#feb450

u-bg-yellow

Blue

#4e9bff

u-bg-blue

Pink

#f13d86

u-bg-pink

SkyBlue

#32fdfa

u-bg-skyblue

Lavender

#d4bfff

u-bg-lavender

Purple

#DDCCFF

u-bg-purple

Green

#45ffcb

u-bg-green

Neutral

Black

#000000

u-bg-black

Dark Gray

#212121

u-bg-darkgray

Mid Gray

#d9d9d9

u-bg-midgray

Light Gray

#f2f2f2

u-bg-lightgray

White

#ffffff

u-bg-white

Text

Aa

Primary

#212121

u-text-primary

Aa

Black

#000000

u-text-black

Aa

Dark Gray

#212121

u-text-darkgray

Aa

Mid Gray

#d9d9d9

u-text-midgray

Aa

Light Gray

#f2f2f2

u-text-lightgray

Aa

White

#FFFFFF

u-text-white

Aa

Pink

#f13d86

u-text-pink

Modes (UNDEFINED)

Aa

Base

u-mode-base

Aa

Invert

u-mode-invert

Aa

Accent 1

u-mode-accent1

Aa

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;

Right

u-mr-0

margin-right: 0;

u-mr-xs

margin-right: 0.5em;

u-mr-sm

margin-right: 1em;

u-mr-md

margin-right: 2em;

u-mr-lg

margin-right: 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;

Font Weight

u-bold

text-weight: 700;

u-medium

text-weight: 500;

u-regular

text-weight: 400;

u-light

text-weight: 300;

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-opacity-60

opacity: 60%;

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

col

col

col

col

col

col

col

col

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

col

col

row

row-align-end

col

col

col

Justify columns

row

row-justify-end

col

col

row

row-justify-center

col

col

row

row-justify-around

col

col

row

row-justify-between

col

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

Main gap (set from Grid Gap - Main variable)

This is the deafult gap used even if there is only a .row class. If a parent row overwrites the gap, you can set it back to the main gap using these classes.

row

row-gap-main

col

col

col

col

col

col

Medium gap (set from Grid Gap - MD variable)

row

row-gap-md

col

col

col

col

col

col

Small gap (set from Grid Gap - SM variable)

row

row-gap-sm

col

col

col

col

col

col

No gap

row

row-gap-0

col

col

col

col

col

col

Other columns modifiers

Shrink Column

col

col-shrink

col