h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Note: If changing core styles for heading, paragraphs, etc., you must make changes at the top-level inherited tag.

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.

Note: No core text elements (headings, paragraphs, etc.) should have any margin. Most text is placed within cells or containers that utilizes flex layouts with gaps that account for margins. All default top & bottom margins have been removed from headings & paragraphs.

Buttons

Note: Buttons should always be placed inside button containers. The div the buttons sit in include a top-margin and are formatted to hold multiple buttons that will drop to a 2nd line if too big on smaller screens.

Button Text

Button Text Button Text

Lists

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Spacers

Note: Spacers are to be used between elements. The class dictates the size of the gap. The spacers only styles are an applied 'height' and 100% width. The example below has them sitting in a black container—otherwise they would be invisible.

Font Sizes

12px

14px

16px

18px

24px

36px

48px

72px

Line Height

100%

125%

150%

175%

Section Padding

100px

140px

Quick Stack Gaps

10px

20px

50px

80px

100px

Button Padding

16px

32px

Cell Variants

cell-v-l-20-top

cell-v-r-20-top

cell-v-l-20-center

cell-v-r-20-center

cell-v-l-20-spread

cell-v-r-20-spread

cell-v-l-10-center

cell-v-r-10-center

cell-v-c-20-top

cell-h-r-20-center

cell-h-l-20-center

cell-h-c-10-center

Note: Cells should follow the following format cell-[VERTICAL (v) or HORIZONTAL (h)]-[(The X-AXIS) LEFT (l), CENTER (C), or RIGHT (r)]-[GAP SPACING]-[Y-AXIS (spread, top, center, bottom)]

Format below:

cell-[v|h]-[l|c|r]-[gap]-[y-axis]

Quick Stacks

Note: To change default values, edit in 'Variables' panel

qs-0

qs-xs

default 10px

qs-s

default 20px

qs-m

default 50px

qs-l

default 80px

qs-xl

default 100px