Headings

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

This is a sample paragraph.

This is a sample paragraph with some bold text right in the middle of it.

This is a sample paragraph with some italic text right in the middle of it.

This is a large sample paragraph.

Lists

• Unordered List Item 1
• Unordered List Item 2

1. Ordered List Item 1
2. Ordered List Item 2

Links

This is a link

Font Family Classes

brandon-regular

brandon-bold

brandon-black

bree

segoe

Text Color Classes

text-orange

text-green

text-dark

text-grey

text-brown

text-dark-brown

text-red

text-white

Font Size Classes

text-xs

text-sm

text-md

text-lg

text-xl

text-xxl

Letter Spacing Classes

ltr-space-regular

ltr-space-lg

ltr-space-xl

Title Style Classes

Custom Typography Classes

menu-item-title

CODE: <h4 class=”menu-item-title”>…</h4> 

---

menu-item-title NO bottom margin

CODE: <h4 class=”menu-item-title mb-0″>…</h4>

---

<h6> To be used between title and description on Menu items

CODE: <h6 class=”ltr-space-med my-1″>…</h6> 
NOTE: The “my-1” class gives it a margin top and bottom of approx. 10px. Make sure that any title above this has the class “mb-0” so there is no additional space about this <h6>

Margin Classes

NOTE: The following examples are putting the classes on <p> tags. By default, paragraphs have a bottom margin. So add “mb-0” to remove that.

Padding Classes

NOTE: The following examples are putting the classes on <p> tags. By default, paragraphs have a bottom margin. So add “mb-0” to remove that.

Button Colors

Primary Secondary Alert Success White

Button Styles

Default Outline Simple Underline Icon Left Icon Right Full Width (Expand) Normal Capitalization