Change Language

Register

(!!) Basic Content Examples

Level 2 Heading (H2)

Level 3 Heading (H3)

Level 4 Heading (H4)

Level 5 Heading (H5)
Level 6 Heading (H6)

Highlight Paragraph – This paragraph is a little bigger, and breathier if you want to highlight something of break up long chunks of text, adding class=“highlight” to any <p> tag creates this style. Etiam auctor lacus elit, id pulvinar velit imperdiet id. Etiam aliquam turpis in libero varius, ut congue tortor gra

Regular Paragraph – This is the standard paragraph , hasellus fringilla nisi eu nisl malesuada faucibus. Etiam auctor lacus elit, id pulvinar velit imperdiet id. Etiam aliquam turpis in libero varius, ut congue tortor gra

NOTE: Any heading appearing dark green will be styled in dark maroon on a FitNation page, but you can also individually set a custom color for any text you like


Above is an example of an <hr> or separator/divider element and below is a standard unordred list (<ul>) element as well as an ordred list element (<ol>). First the unordered list:


Now my ordered list element:

  1. Item 1 that’s first
  2. My Second Item
  3. 3rd and Final Item is a Link this Time

Image Stripe Block Example

This block allows you to pick a full-width BG image and then an overlay – which you can pick to be on the right or left side – on top of the image with some teaser text and a call to action (CTA) button. You can also adjust the primary and accent color of the overlay block as well as select an accent icon.

Google.com

Below is a row of icons that can have up to 4 icons, and you can swap the color between Green (Default), Blue and Maroon:

Below are some examples of image grids you can use for larger call-to-action links . First is a grid of thumbnail links (Thumbnail Grid Links) and after that is a grid of 50%-width slide-up cards (Full Width Slide-Up Cards Grid), for these you’ll want to use an even number of cards :

Here’s another example of 50% width image grid with teasers that display all the time (not just on hover):

My Tile Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan

Playground Tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan

An Aquatics Tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan

4th Tile Heading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan


Below is an example RecTrac block:

string(8) "query_id"
int(1650)

Grouped Content

The two most popular ways to group text content will be Columns and Accordions and below is an example of each:

I like to use a 2/3 (left) and 1/3 (right) split for columns a lot because you can put a nice accent image on the right side of the text and then the columns will just stack as you’d expect on mobile

And here’s an accordion example, accordions used on FitNation pages will have their accent color automatically adjusted to FitNation’s maroon:

First Accordion Item (Set to be OPEN on Page Load)

You can set any accordion objects to be open or closed on page load

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan nulla, eu iaculis lorem. Phasellus gravida pretium ex, fringilla malesuada urna placerat at. Sed erat purus, commodo ut sollicitudin ut, cursus non augue. Proin rhoncus placerat libero a ornare. Vivamus tristique convallis ultrices. Nulla est orci, 

  • Some list items
  • could go here
  • beneath the text

And then back to text to end


You can also use tables in a few different ways, by default, tables will take up the full-width of the content column but you can set classes to limit that if you like or place them inside of columns to minimize their width. Below is an example table:

AreaAddressTrail Info
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Park/Trail NamePark123 S Main StXX mi (walking & biking)
Past Program Guides English
2024 Summer Program & Events Guide
2024 Spring Program Guide
2024-2025 Preschool Preview Guide
2023-2024 Winter Program Guide
2023 Fall Program & Events Guide
2023 Summer Program & Events Guide
2023 Spring Program & Events Guide
2023 Camp Guide
2023/2024 Preschool Preview Guide
2022-2023 Winter Program Guide