What is a Hero component?

The Hero component gives you the ability to create a block that is full width, with a call to action link, and a link to media. The Hero Banner is ideal for home pages. You are able to add multiple images and have a stationary text box. We recommend using a maximum of four images so the Hero component does not become too busy.

Laptop with hero on screen
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Example of a Hero Component

Default Style and Sand 300 Background Color

Hero Link

Step-by-Step Instructions

Adding a Hero

  1. Click the edit link at the top of the page
  2. Move your cursor where you want to place the component.
  3. Click the plus icon.
  4. Select Hero from the menu

Content 

  1. Click on Add media in the Image Section if you are creating a Hero component with an image.
  2. Select the appropriate image or upload the image to the Image Library.
    Recommended Image Dimensions: Landscape 4:3 - Maximum image size is 4MB
  3. Click on Add media in the Video section if you are creating a Hero component with a video.
  4. Select the appropriate video or add the URL from Vimeo or YouTube.
  5. Add a Title.
    Note: Title field text is limited to 70 characters.
  6. Add a Subtitle.
    Note: The subtitle may not appear in all configurations. The examples above display the best configurations. Subtitle field text is limited to 80 characters.
  7. Add an internal page or external link (optional).
  8. Add the Button text (optional).

Styles

  1. Toggle to the Styles tab.
  2. Select the appropriate Styles based on your desired layout. (See below for examples).
  3. Select one of the following Hero styles as applicable:
    • Banner if you added an image
    • Video if you added a video.

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.

Style Options

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Example of a Default Hero

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Example of an Angled Banner Hero

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Example of a Banner Hero

Custom Subtitle

Hero Link

Example of a Video Hero

Alert

Only Site Administrators can add background colors.

Background Colors 

This setting is available only to site owners and should be used sparingly to draw attention to key information.

Note: This applies only to One Column Sections.

How to apply a background highlight:

  1. Open the Styles tab.
  2. Choose a background color to highlight your components:
  • None (default)
  • Blue 100
  • Blue 300
  • Blue 500
  • Blue 700
  • Sand 300
  • Sand 500
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

No Background Color

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Blue 300 Background Color

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Blue 300 Background Color

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Blue 500 Background Color

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Blue 500 Background Color

Custom Subtitle

Hero Link
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Sand 300 Background Color

Custom Subtitle

Custom Subtitle
EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard

Sand 500 Background Color

Custom Subtitle

Custom Subtitle