container
container
container-md
container-sm

Grid

grid_2
grid_1-2
grid_1-2
grid_4
grid_8
grid_3
grid_6

Typography

H1 Headings

Heading

H1 Display Heading

Good

H2 Headings

Heading

H3 Headings

Heading

H4 Headings

Heading

All Ordered Lists
  1. Item 1
  2. Item 2
  3. Item 3
All Unordered Lists
  • Item 1
  • Item 2
  • Item 3
paragraph-xl

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-l

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

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. Aengan faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph-s

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. Aengan faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

blockquote
"Block Quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."
— Bob Ross
text-block-m
This is some text inside of a div block.
text-block
This is some text inside of a div block.
text-block-s
This is some text inside of a div block.
text-block-xs
This is some text inside of a div block.
rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph text. Lorem ipsum bold italic sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore subscript magna aliqua. Ut enim ad minim superscript veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute Text Link irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Duis aute Text Link irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

‍

"Block Quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."
~Source

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text Colors

Text White
text_white
Text Brand
text_brand-daisy
Text Grey
text_grey
‍
Text Accent
text_brand-daisy
‍

Colors

Brand

color_brand
color_brand-alt
color_accent

Neutrals

color_{{name}}
color-white
color-black

System

color_warning
color_error
color_success
color_info

Spacing

Spacers

xs 0.5rem
s 1rem
m 2rem
l 3rem
xl 4rem
xxl 6rem
xxxl 8rem
spacer-#
xs
s
m
l
xl
xxl
xxxl

Padding

Padding All

padding-#
s
m
l
padding_lr-#
s
m
l

Padding Top & Bottom

padding_tb-#
s
m
l

Padding Top

padding_t-#
s
m
l

Padding Bottom

padding_b-#
s
m
l

Margin

Margin Top & Bottom

margin_tb-#
s
m
l

Margin Top

margin_t-#
s
m
l

Margin Bottom

margin_b-#
s
m
l

Buttons

btn
Button Text
btn
Button Text
btn
small
Button Text
btn
secondary
Button Text
btn
secondary
Button Text
btn
secondary
small
Button Text
btn
outline
Button Text
btn
outline
Button Text
btn
outline
small
Button Text
btn
plain
Button Text
btn
plain
Button Text
btn
plain
small
Button Text

Sandbox