A Hero is a full-width highlight row (with text and images) usually placed at the top of the home page to grab attention. Heroes can only be added to Pages.

Types of Heroes

There are 4 different Hero layouts to choose from:

  1. Carousel Hero: Creates an accessible carousel of up to 5 items that users can manually click through to view each carousel item. Each carousel item has a title and image with optional fields for a tagline and link.
  2. Full-width Image Hero: This hero type displays a large image that bleeds into the borders of the page (includes an optional title and link).
  3. Image + Text Hero (portrait and landscape images): Provides two options for displaying an image and text in a hero. Optional fields include: tagline, title, subtitle, and link.
  4. Video + Text Hero: Displays a video in the hero and provides optional fields for tagline, title, subtitle, and link.

Adding a Hero

(* = required field) 

 

1.) Select Hero Block Type

First, when adding or editing a Page, find the Hero section, select a Hero Block type, and click the Add Hero Block button.

Only one Hero Block type is allowed per Page. To switch between them, remove the current hero by clicking the three dots to the right of the Collapse button. Then, select a new type. 

Image
screenshot showing location of the Remove Hero function

 

2a.) Carousel HEro 

Each Carousel Item* has a tagline, title*, hero image*, and hero link. Click the Add Carousel Item button to create up to 5 Carousel Items.

Image
screenshot of the Add Carousel Hero screen

 

2b.) Full-width Image Hero

The Full-Width Image Hero has a title, hero image*, and hero link. 

Image
screenshot of the Full-width image hero fields

 

2c.) Image + Text Hero

First, select a Display Option*:

  • Option 1: Image on the left and text on the right.
  • Option 2: Portrait image on the left and text on the right.

Both options have a tagline, title, subtitle, hero image*, and hero link. 

 

Image
screenshot of Image + Text Hero fields

 

 

2d.) VIDEO + Text Hero

The Video + Text Hero has a tagline, title, subtitle, hero video*, and hero link. 

Image
screenshot of Video + Text hero fields

Hero Examples

Carousel Hero Example

Image
Example of a Carousel Hero

 

Full-width Image Hero Example (Image only)

Image
Example of a Full Width Image Hero

 

Full-width Image Hero Example (Image with title and link) 

Image
Example of a Full Width Image+Title Hero

Image + Text Hero Example (Option 1) 

Image
Example of Image+Text Option 1 Hero

Image + Text Hero Example (Option 2) 

Image
Example of Image+Text Option 2 Hero

Video + Text Hero Example 

Image
Example of Video+Text Hero