Spacing

Section, Row, Column Default Spacing

Section by default is given 0 spacing, there is no option to set section spacing

Rows are given a top and bottom of spacing of 2

Columns by default are given a top and bottom of spacing of 2

Sections with a background

Rows are given a top and bottom of spacing of 4

Columns by default are given a top and bottom of spacing of 2

Sections after a background change

Row top spacing value of 4

Columns by default are given a top and bottom of spacing of 2

Row bottom spacing value of 2

Sections with same background color

Row top spacing value of 2

Columns by default are given a top and bottom of spacing of 2

Row bottom spacing value of 2

All spacing is done using Boostrap Spacing

If adding spacing in html use bootstrap spacing class system (p- or m-).

If adding spacing in sass use mixin spacer(#)

Grouped items, use spacer(2) or in bootstrap class me-2

Inline list Ex
Items are spaced 1rem apart
This is either px-1 or pe-2

Paragraphs also use a mb-2

To signify a new section double the spacing normally used for a pargaph element. mb-4 if using classing or spacer(4)

Inline list Ex
Items are spaced 1rem apart
This is either px-1 or pe-2

Inline list Ex
Items are spaced 1rem apart
This is either px-1 or pe-2

Colors

White

White Dark

Grey Light

Grey

Grey Dark

Black Light

Black

Accent_1

Accent_2

Typography

Hero Font Size

Heading 1 Element With color

Heading 2 Element With color

Heading 3 Element With color

Heading 4 Element With color

Heading 5 Element With color

Heading 6 Element With color

Paragraph Text Bolded

Paragraph Text Italicized

Paragraph Lead Style

Lots of paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.