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:

• Something in my list
• Another Item but it’s a link too
• Something else listing
• My last list item

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

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

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

Download a PDF File

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

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:

2024 Spring Program Guide

English