Typography

Heading 1

.h1

Heading 2

.h2

Heading 3

.h3

Heading 4

.h4
Heading 5
.h5
Heading 6
Heading 6
Heading 5
.overline
.subhead
.subhead

Paragraph

.text-large

.text-small
.text-white
.text-black
.text-grey
.text-center
.text-center-m
.text-center-sm
.text-center-xs
.fw-regular
.fw-medium
.fw-semibold
.fw-bold
.no-wrap
.no-wrap.normal-m
.no-wrap.normal-sm
.no-wrap.normal-xs
.hide-m
.hide-sm
.hide-xs
.overflow-hidden
.show-m
.show-sm
.show-xs
This is some text inside of a div block.
Buttons
Button (.btn).btn.is-secondary.btn.gold
.btn.white.btn.is-secondary.gold
Rich Text

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph

Link

Bold

  • List item
  • List item
  1. List item
  2. List item
.section (desktop: 96px, tablet: 80px, mobile: 60px)
.section.p-small (desktop: 80px, tablet: 64px, mobile: 48px)
.section.p-large (desktop: 120px, tablet: 80px, mobile: 64px)
.section.pb-0
.section.p-small.pb-0
.section.p-large.pb-0

Getting Started

col
col
col
col
col
col
col
col
col
col

Responsive Grid

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
col-m-1
col-m-11
col-m-2
col-m-10
col-m-3
col-m-9
col-m-4
col-m-8
col-m-5
col-m-7
col-m-6
col-m-6
col-m-12
col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12

Reverse Wrapping (on tablet and mobile)

col-4
col-8
col-8
col-4

Vertical Alignment

Align-Start

align-start
align-start
align-start

Align-Center

align-center
align-center
align-center

Align-End

align-end
align-end
align-end

Horizontal Alignment

Justify-Start

justify-start
justify-start

Justify-Center

justify-center
justify-center

Justify-End

justify-end
justify-end

Justify-Between

justify-between
justify-between

Justify-Around

justify-around
justify-around