Hero

How to add a Hero component

Step 1: Add and configure Hero component

1. Add a Hero component (see Adding a component for instructions on how to add a component).
2. Select the Block Settings tab.
3. Select a style from the Style menu:
   1. Floating: Display text and images in a card overlaying the image.
   2. Stacked: Display text and links in a card overlapping the bottom left of the image.
   3. Split Horizontal: Display text and links in a full-width panel below the image.
   4. Split Vertical: Display text and links in a full-height panel to the left of the image.
4. Select Large, Medium, or Small from the Hero Size menu.
5. Add an optional Page Anchor Link to allow for links to the Hero component (see instructions under Linking to page content).

Step 2: Add a Hero item

Please note that the Hero component only supports one visible item at a time.

1. Select the Content tab and select the Add Hero button.
2. Fill out the following information for the text overlay:
   1. Eyebrow: Keywords that display above a heading. This could be the site section or page topic category.
   2. Heading: A heading that captures the topic of the page. The heading should be clear and descriptive.
   3. Body: Introductory text that further describes the topic of the page. This should be no more than a few sentences.
3. Set the heading level using the Heading Level menu.
   1. If the Hero is being used at the top of the page and includes the page title, the heading level should be H1. (Note that there should only be one H1 per page.)
   2. If a Hero is used farther down on the page for regular content, we recommend using H2 in most cases to introduce a new section, and H3 for subsections.
4. Next add an image to the component by selecting the Add image button. You can select an image from the media library or upload a new image (see Media Library for details about working with the media library).
   1. The optimal image size (in pixels) for a Hero component is 3840 x 1650 (see Image Sizes for more details).
5. Provide the appropriate alternative text or mark the image as decorative, depending on the role of the image on the page (see When to add alt text for best practices for providing alternative text).
6. Select the Add Call to Action Link button to add up to two (2) call to action links to the text overlay (for instructions, see Step 2: Add Call to Action Links on Adding a component heading).

Step 3: Configure Hero item settings

1. Select the Block Settings tab.
2. Select an alignment from the Text Card Alignment menu to align the text overlay to the Left, Center, or Right of the image. Note that this setting only applies to Hero items within a Hero component provided using the Floating style.
3. Add an optional Page Anchor Link to allow for links to the Hero item (see instructions under Linking to page content). This feature is useful for Hero components with multiple Hero items, allowing for links to, for example, the third Hero item in a four-item Hero component.
4. Select the Color Settings tab.
5. Select a color scheme from the Hero Color Scheme menu and review the Color Component Scheme Preview to see the effect of changing the color settings. For Hero items, the color scheme affects the colors used in the text overlay.
6. Once you have completed your Hero item configuration settings, choose Save to save the Hero item.

Step 4: Save Hero component

1. Preview the Hero item in the Heroes section of the Create new Hero dialog.
2. Once you have finished adding your Hero item, choose Save to save the Hero component.