Globe iconLogin iconRecap iconSearch iconTickets icon

Organism Showcase

A showcase of everything that you can add to a page.

This is a WYSIWYG inside of an Accordion. This is for text!

This is a WYSIWYG using a larger text style. Add a subheading here!

App Store Buttons
Content Heading

This is a Content Heading - No design and left justified

This is a Content Heading - Themed and centered

This is a Content Heading - Themed and left justified

This is a Content Heading - Lined and left justified

This is a Content Heading - Lined and centered

Countdown Clock
2018 Home Opener

This is what you would see if the date already passed. Or it could go away once expired.

Featured Content
Follow the Giants - Large and Small

50% Column 1

Using a grid, we can place content items next to each other, up to 6 in a row.

Hero Title
This is a Hero Blurb! Position: Top Center
Hero Title
This is a Hero Blurb! Position: Bottom Left
Hero Title
This is a Hero Blurb! Position: Center Right

Heroes are predominantly used at the top of pages to showcase the main focus of a page. Heroes usually takes up the full width of the column they're in; you won't usually find them inset or with padding around them. 

Hero images are 4:1 ratio (2608x652).


Images can be uploaded independently to sit anywhere on the page. Available aspect ratios are:

  • 4:1 Aspect Ratio (Used primarily for Hero)
    • Target Height and Width: 2608x652
  • 5:2 Aspect Ratio (Used for Mediawall panels)
    • Target Height and Width: 2610x1044
  • 16:9 Aspect Ratio (Most common, used in example above, also for scrolling photo galleries using Mediawalls)
    • Target Height and Width: 2568x1445
  • 1:1 Aspect Ratio (Square, used also for circle variant featured content)
    • Target Height and Width: 2608x2608
  • 4:5 Aspect Ratio (For when an image is taller than it is wide, often used for maps)
    • Target Height and Width: 2608x3260

Mediawalls can have content and links, like the homepage, or can be used as scrolling photo galleries.

The image size depends on the intended use of the mediawall:

  • Mediawall with written content and links: 5:2 ratio images
  • Mediawall as scrolling gallery with no written content: 16:9 ratio images

Especially useful for subsections, the Navbar is a secondary level of navigation to jump between pages.

Pull Quote

Sidekick is a common pattern used to link to promoted content. Similar to the Hero, it consists of an image with a scrim. Sidekicks are usually shown side by side, and complement the hero on the page (hence the name sidekick).

There are 4 options of sidekick scrim placement, but regardless which one is used all sidekicks in a row should have the same option.

Sidekick images should be 16:9.

Stat Counter
Buster Posey's Road to 2,000 Hits

Congratulations to Buster Posey on his accomplisment!


We have the ability to count a specific stat, hits are used in the above example. We can use a 4:1 ratio background image, and have the option of including a button.

Once the specific goal is reached, there can either be a leave-behind message ("Congratulations to Buster Posey") or the counter can be set to disappear.


WYSIWYG Headline (h3)

Text in a WYSIWYG organism has many styling options.

  • You can
  • Add
  • Bullet points


  1. Numerical
  2. Lists

Hyperlinking anywhere is also easy

Tables can also be added, and you can feature up to four WYSIWYG organisms in one row.

Video Player

A Video Player is an embedded video which will play inside the page. Currently we do not have the ability to specify a poster image for the landing page, it will use whatever the thumbnail image is that is associated with the video.