Styleguide

Mobile Only

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
  1. Ordered List Item 1
  2. Ordered List Item 2
    • Unordered List Sub Item 1
    • Unordered List Sub Item 2
    • Unordered List Sub Item 3
  3. Ordered List Item 3
    1. Ordered List Sub Item 1
    2. Ordered List Sub Item 2
    3. Ordered List Sub Item 3
  4. 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

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-tight

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-normal

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-loose

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.

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

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.

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

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.


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


  • 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


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