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
Page Builder Modules

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

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

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

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

1200px wide 992px wide 768px wide 576px wide 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

Button Label

Content Centered - Header

Subheader

Button Label

Content Featured - Header

Subheader

Label

Content Grid - Header

Subheader

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Call to Action - Callout

Button Label

Image Grid - Header

Subheader

Posts - Header

Subheader

Take Your Pup on New Adventures

While SWCDP is closed for 2024 Spring Renovations and Maintenance . . . why not explore new places with your pup? Southwest City Dog Park Spring Renovation Close March 24 at 10pm – Target re-opening June 1 at 6am WALK WILLMORE PARK (and other parks, too) St Louis has many great parks – check them …

Mar 23

2024 Spring Special at Bar K

While SWCDP is closed for Spring Turf Renovation – we are pleased to announce Bar K will once again offer special discounts during April and May 2024.

Mar 23

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.