Styleguide
- 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
- Ordered List Sub Item 1
- Ordered List Sub Item 2
- 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
- Ordered List Sub Item 1
- Ordered List Sub Item 2
- 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
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.
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
Text links
- You can configure the color of text links using tailwind.js
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.textColors
- You can add, edit, or remove colors using tailwind.js
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
tests
card
fdsfsad
cards
fdsafdsa
card
fdsafsdfasdf
cardsf
dsafdsfdsafdsfasfd