Styleguide
- Typography
- Font Sizes
- Text Links
- WooCommerce Alerts
- 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
WooCommerce Alerts
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.dark .btn.lightColors
- 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:
Oops! We could not locate your form.
Content Container Width
This area is the width of the browser window.
Background images intended to be full width need to be large enough to fill this area on large screens.
This white area is the width of the ".container" class.
This class controls the width of content on every page.
Right now this container is:
1200px wide 992px wide 768px wide 576px wide 100% width
Gutenberg Blocks
This is a call to action block
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
This is a 50/50 block
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Keep Up With The Latest
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Featured Content Block (Image)
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Featured Content Block (Video)
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Custom Cards
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Featured
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Our Best Sellers
Cat ipsum dolor sit amet, cat fur is the new black flop over or eat a rug and furry furry hairs everywhere oh no human coming lie on counter don’t get off counter. Scratch so owner bleeds i shredded your linens for you, soft kitty warm kitty little ball of furr or munch on tasty moths, purr but sit and stare or use lap as chair. Stand in doorway, unwilling to chose whether to stay in or go out. Dismember a mouse and then regurgitate parts of it on the family room floor hiiiiiiiiii feed me now for scratch.
Styleguide
