Globe iconLogin iconRecap iconSearch iconTickets icon
The Official Site of the San Francisco Giants

Organism Showcase

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

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.

Days
Hrs
Mins
Secs
Featured Content
Follow the Giants - Large and Small
Grid

50% Column 1

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

Hero
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).

Image

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
Mediawall

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
Navbar

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

Pull Quote
Sidekick

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!

Hits

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.

Standings
WYSIWYG

WYSIWYG Headline (h3)

Text in a WYSIWYG organism has many styling options.

  • You can
  • Add
  • Bullet points

OR

  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.