Header var • h1 • 64/36 • .u-h-tag

H1 Heading

Header var • h2 • 48/30 • .u-h-tag

H2 Heading

Header var • h3 • 36/26 • .u-h-tag

H3 Heading

Header var • h4 • 30/22 • .u-h-tag

H4 Heading

EYEBROW Font weight, color and alignment can be styled with utility classes using the class prop of the component

Eyebrow - pre-header • 14/14 • .u-eyebrow-pre-header

Eyebrow header

Paragraph block • Small • 14/13 • .u-p-default

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.

Paragraph block • Default • 16/16 • .u-p-default

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.

Paragraph block • Medium • 18/17 • .u-p-default

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.

Paragraph block • Large • 20/18 • .u-p-default

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.

Paragraph block • X-Large • 24/20 • .u-p-default

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.

Spacer - universal • 8/8 • .u-spacer

Spacer - universal • 16/12 • .u-spacer

Spacer - universal • 24/18 • .u-spacer

Spacer - universal • 32/24 • .u-spacer

Spacer - universal • 64/48 • .u-spacer

Spacer - universal • 96/72 • .u-spacer

Primary • .u-button-default-layout / u-button-primary

Call to action • .u-button-default / u-button-primary

Secondary • .u-button-default / u-button-primary

Disabled • .u-button-default / u-button-primary

Margin — Left
u-m-l-4
u-m-l-8
u-m-l-12
u-m-l-16
u-m-l-20
u-m-l-24
u-m-l-28
u-m-l-32
u-m-l-36
u-m-l-38
u-m-l-40
u-m-l-42
u-m-l-46
u-m-l-48
u-m-l-64

‍Margin — Right
u-m-r-4
u-m-r-8
u-m-r-12
u-m-r-16
u-m-r-20
u-m-r-24
u-m-r-28
u-m-r-32
u-m-r-36
u-m-r-38
u-m-r-40
u-m-r-42
u-m-r-46
u-m-r-48
u-m-r-64

‍Margin — Top
u-m-t-4
u-m-t-8
u-m-t-12
u-m-t-16
u-m-t-20
u-m-t-24
u-m-t-28
u-m-t-32
u-m-t-36
u-m-t-38
u-m-t-40
u-m-t-42
u-m-t-46
u-m-t-48
u-m-t-64

‍Margin — Bottom
u-m-b-4
u-m-b-8
u-m-b-12
u-m-b-16
u-m-b-20
u-m-b-24
u-m-b-28
u-m-b-32
u-m-b-36
u-m-b-38
u-m-b-40
u-m-b-42
u-m-b-46
u-m-b-48
u-m-b-64

Padding — Horizontal (left + right)
u-p-x-4
u-p-x-8
u-p-x-12
u-p-x-16
u-p-x-20
u-p-x-24
u-p-x-28
u-p-x-32
u-p-x-36
u-p-x-38
u-p-x-40
u-p-x-42
u-p-x-46
u-p-x-48
u-p-x-64

Padding — Vertical (top + bottom)
u-p-y-4
u-p-y-8
u-p-y-12
u-p-y-16
u-p-y-20
u-p-y-24
u-p-y-28
u-p-y-32
u-p-y-36
u-p-y-38
u-p-y-40
u-p-y-42
u-p-y-46
u-p-y-48
u-p-y-64

Padding — Top only
u-p-t-4
u-p-t-8
u-p-t-12
u-p-t-16
u-p-t-20
u-p-t-24
u-p-t-28
u-p-t-32
u-p-t-36
u-p-t-38
u-p-t-40
u-p-t-42
u-p-t-46
u-p-t-48
u-p-t-64

Padding — Bottom only
u-p-b-4
u-p-b-8
u-p-b-12
u-p-b-16
u-p-b-20
u-p-b-24
u-p-b-28
u-p-b-32
u-p-b-36
u-p-b-38
u-p-b-40
u-p-b-42
u-p-b-46
u-p-b-48
u-p-b-64

Width
u-width-4
u-width-8
u-width-12
u-width-16
u-width-20
u-width-24
u-width-28
u-width-32
u-width-36
u-width-38
u-width-40
u-width-42
u-width-46
u-width-48
u-width-64

Height
u-h-4
u-h-8
u-h-12
u-h-16
u-h-20
u-h-24
u-h-28
u-h-32
u-h-36
u-h-38
u-h-40
u-h-42
u-h-46
u-h-48
u-h-64

Background color
u-bg-color-white
u-bg-color-eg-100
u-bg-color-eg-200
u-bg-color-eg-300
u-bg-color-eg-400
u-bg-color-eg-500
u-bg-color-eg-600
u-bg-color-eg-700
u-bg-color-subzero-green
u-bg-color-mint
u-bg-color-sagewood
u-bg-color-heritage-green
u-bg-color-green-769
u-bg-color-hover-green
u-bg-color-sand
u-bg-color-peach
u-bg-color-error
u-bg-color-gold-600
u-bg-color-transparent