Typography

Heading 1

.h1

Heading 2

.h2

Heading 3

.h3

Heading 4

.h4
Heading 5
.h5
Heading 6
.overline
.subhead (Text 1 bold)
.label

.text-large (Text 1)

Paragraph (Text 2)

.text-small (Text 3)
.text-xsmall (Text 4)
.clr-white
.clr-black
.clr-grey
.clr-grey-2
.clr-purple
.clr-blue
.text-gradient
.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
Shadows (Defined in "Global Styles" Component)
.shadow-large
.shadow-small
Rich Text

Heading 2

Heading 3

Heading 4

Paragraph

Link

Bold

Blockquote
  • List item
  • List item
  1. List item
  2. List item
.block-quote
Walter Bishop
CEO, Massive Dynamic
.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