Styleguide

screen-xl

screen-lg

screen-md

screen-sm

Mobile Only

Typography
Font Sizes
Text Links
Buttons
Colors
Search Forms
Gravity Forms
Content Container Width
Gutenberg Blocks

Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Unordered List Item 1
Unordered List Item 2
1. Ordered List Sub Item 1
2. Ordered List Sub Item 2
3. Ordered List Sub Item 3
Unordered List Item 3
- Unordered List Sub Item 1
- Unordered List Sub Item 2
- Unordered List Sub Item 3
Unordered List Item 4

Ordered List Item 1
Ordered List Item 2
- Unordered List Sub Item 1
- Unordered List Sub Item 2
- Unordered List Sub Item 3
Ordered List Item 3
1. Ordered List Sub Item 1
2. Ordered List Sub Item 2
3. Ordered List Sub Item 3
Ordered List Item 4

.leading-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-tighter

.leading-tight

.leading-normal

.leading-loose

Link Text (.link)
Strong Text (.font-bold)
Italic Text (.italic)
Font Sans (.font-sans)
Font Sans (.font-serif)

This is an example of a blockquote element. A blockquote can be a testimonial, quote, or callout.

Font Sizes

Text xs is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text sm is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text base is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text lg is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 2xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 3xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 4xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 5xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text links

You can configure the color of text links using tailwind.js

This is a text link example. This is what text links look like.

Buttons

These are the basic sitewide button styles. You can use the button.blade.php partial. To get an icon, pass in the Font Awesome icon name (for example, fa-arrow-right). Be sure to check that it's been imported in main.js.

.btn .btn.light .btn.text

Colors

You can add, edit, or remove colors using tailwind.js

Brand Green (primary) #026E56

Black (black) #222222

White (white) #ffffff

Light Gray (gray-light) #ebeded

Gray (gray) #CAD0CE

Dark Gray (gray-dark) #616663

Dark Green (green-dark) #00362A

Error Red #6e0202

Success Green #026E56

Search Form

Gravity Forms

Shows labels and sub-labels by default
Add class "hide-labels" in form settings to hide ALL labels.
Add class "hide-sub-labels" to hide ONLY sub-labels.

Example:

Contact Us

Gutenberg Blocks

test

tests

card

fdsfsad

cards

fdsafdsa

card

fdsafsdfasdf

cardsf

dsafdsfdsafdsfasfd