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
Follow the Giants - Large and Small
50% Column 1
This is a 50% column inside a grid, putting the items next to each other.
Using a grid, we can place content items next to each other, up to 6 in a row.
This is a Hero Blurb! Position: Top Center
This is a Hero Blurb! Position: Bottom Left
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.
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.
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
- Bullet points
Hyperlinking anywhere is also easy
Tables can also be added, and you can feature up to four WYSIWYG organisms in one row.