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.

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.

Buttons

Primary Action Buttons

Secondary Action Buttons

Tertiary Action Buttons

Buttons Icons

Regular Icon Button

Menu Open

Pricing Popup Close

Menu Close Icon

Social Icons

Misc Buttons

Button CTA Fixed

Panels

Panel Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

Panel Content Shadow Below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

We'd love to send you information about our pricing

Enter your email in the field below and we'd be happy to show you our rates and explain them in detail!