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:


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.

GreatNews, Helpers Needed, Turf Update

It’s official – Willmore Park will re-open very soon! The main gate will finally be open for car traffic for the general public. Parks Dept has begun issuing permits for the pavilions. We still do not know which date the barricade will be removed – sometime between now and July 4. You will just have …
Read More
Jun 25

Dog Park Reopening July 1

SWCDP will re-open on July 1, with some guidelines and restrictions. As of this email – we still do not have a date for Willmore Park to re-open to car traffic. We will let you know as soon as we receive an official date – but we are opening the dog park regardless. Members will …
Read More
Jun 22
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.