Styleguide

Mobile Only

Typography

H1 Heading (.h1)

H2 Heading (.h2)

H3 Heading (.h3)

H4 Heading (.h4)

H5 Heading (.h5)

H6 Heading (.h6)

  • 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.

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

  • Basic sitewide button styles
I am a button I am disabled

Colors

  • You can add, edit, or remove colors using tailwind.js
Theme1 (Green) #209771
Theme2 (Red) #f45d41
Theme 3 (Yellow) #fcd301
Theme 4 (Brown) #dec095
Theme 5 (Green Light) #5ab93f
White #ffffff
Black #000000
Error #AA202C
Warning #f7d200
Success #07b736


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 need to be large enough to fill this area on large screens.

This grey area is the width of the ".container" class.

This class controls the width of content on every page.

Right now this container is:

100% width


Page Builder Modules

By the Numbers - Header

Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1 Value Label
2 Value Label
123 Value Label
Content 50/50 - Header Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.

Button Label
Content 50/50 - Header Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.

Button Label

Content Centered - Header

Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.

Button Label

Content Grid - Header

Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Call to Action - Callout

Image Grid - Header

Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.

Posts - Header

Subheader

Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.

Agility Demo Success --- Tutoring Classes Begin Sept 25

SWCDP brought back Agility in a big way. We held a two day event in July, braved the heat and rain, and had a fantastic turnout. Many dogs and humans experienced agility for the first time. It was exciting. See our proud classmates below. Southwest City Dog Park is fortunate to have a long-time member, …
Read More
Sep 13

Proposed Halloween Event

Our last Halloween event was in 2019. The pandemic curtailed most of our events over past 18 months. Additionally, our membership has grown and changed. A lot of our reliable volunteers are either no longer with us or unable to do the volunteer jobs from past seasons. So . . . we want to share …
Read More
Sep 8
Testimonial - Quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Author of quote

Content entry WYSIWYG. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum, dui et faucibus sagittis, arcu tellus commodo lacus, a sodales diam eros vitae nulla. Praesent vitae sollicitudin ex, eget pharetra nulla. Quisque porttitor tincidunt lobortis. Praesent luctus justo aliquam purus ornare, eu facilisis turpis viverra. Nulla ornare sodales tortor, at sagittis turpis. Integer augue nulla, finibus ac augue sed, venenatis bibendum purus.