Typography

Bai Jamjuree

Headings

Type: Sans Serif
Weights: Medium (500)

Inter

Body

Type: Sans Serif
Weights: Normal (400), Medium (500)
H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

h1
Class
h2
Class
h3
Class
h4
Class
paragraph-24

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

paragraph-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.

paragraph-14

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

eyebrow
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Black

#0A0A0A
u-bg-black

Light Gray

#F4F7FC
u-bg-light-gray

Blue Gradient

#84B9E0 > #FFFFFF
u-bg-gradient

White

#ffffff
u-bg-white
Aa

Black

#0A0A0A
u-text-black
Aa

White

#FFFFFF
u-text-white

Components

Default

btn

Secondary

btn
cc-secondary

Text Link

All Links

Default Light

btn
cc-light

Secondary Light

btn
cc-secondary
cc-light

Text Link Light

u-text-white
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Default

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

Utilities

Top

u-mt-0
margin-top: 0
u-mt-1
margin-top: 1em
u-mt-2
margin-top: 2em
u-mt-3
margin-top: 3em
u-mt-auto
margin-top: auto

Bottom

u-mb-0
margin-bottom: 0
u-mb-1
margin-bottom: 1em
u-mb-2
margin-bottom: 2em
u-mb-3
margin-bottom: 3em

Other

u-m-0
margin: 0
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1em
u-ml-1
margin-left: 1em

Top

u-pt-0
padding-top: 0
u-pt-1
padding-top: 1em
u-pt-2
padding-top: 2em
u-pt-3
padding-top: 3em

Bottom

u-pb-0
padding-bottom: 0
u-pb-1
padding-bottom: 1em
u-pb-2
padding-bottom: 2em
u-pb-3
padding-bottom: 3em

Other

u-p-0
padding: 0
u-p-1
padding: 1em
u-text-center
text-align: center;
u-text-right
text-align: right;
u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;
u-z-index-1
position: relative;
z-index: 1;
u-d-none
display: none;
u-d-block
display: block
u-d-flex
display: flex;
u-w-100
width: 100%;
u-h-100
height: 100%;
u-aspect-1x1
position: relative;
padding-top: 100%;
width: 100%;
u-img-cover
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
object-fit: cover;
u-sr-only
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
border: 0;
Screen Reader Only
u-link-overlay
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;

Grid

Columns need to be nested within  a "row" and a direct child of a "container".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 

col
col
col
col
col
col
col
col
col
col

To remove all padding from columns, use the "col-no-gutters" class preceded by the initial class of "col".

col
col-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters

To shrink a column to the width of it's children, use the "col-static" class preceded by the initial class of "col".

col
col-static
col

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col
col-lg-4
col
col-lg-8
col
col-lg-6
col
col-lg-6
col
col-lg-3
col
col-lg-2
col
col-lg-7

To define our 12 column grid, all classes must precede with the initial class of "col"

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

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

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

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

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

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

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

To align columns from the top, combine a class of  "align-start" preceded by the class of "row"

row
align-start
col
col
col

To align columns from the center, combine a class of  "align-center" preceded by the class of "row"

row
align-center
col
col
col

To align columns from the bottom, combine a class of  "align-end" preceded by the class of "row"

row
align-end
col
col
col

To align columns from the right, combine a class of  "justify-center" preceded by the class of "row"

row
justify-center
col
col

To align columns from the right, combine a class of  "justify-end" preceded by the class of "row"

row
justify-end
col
col

To evenly space columns between each-other, combine a class of  "justify-between" preceded by the class of "row"

row
justify-between
col
col

To evenly space columns around each-other, combine a class of  "justify-around" preceded by the class of "row"

row
justify-around
col
col

To individually reorder columns, combine a class of "col-first", "col-last", "col-sm-first", or "col-sm-last" preceded by the by class of "col"

col
col-last
col
col-first
col
col-sm-first
col
col-sm-last