Hero Unit Block
Hero Unit blocks are large visual elements that are meant to grab attention and showcase key content. Many options for layout make it extremely versatile. You can enter any amount of text, and have any quantity of linked buttons at the bottom. It will stretch or shrink to fit the region in which it is placed. The background can be an image or a block of color.
Note: You add blocks via Layout Builder. See the Layout Builder tutorial to learn more.
Demo: Hero Unit Block
Create a Hero Unit Block
- Navigate to the page you'd like to update, and click Edit on the page.
- Click on the Layout tab.
- Choose or add a Section to place the block
- Click Add block.
- Click Create Content Block.
- Scroll down and select Hero Unit.
Configure a Hero Unit Block
- Title: a title that will display above the Hero Unit Block when placed on a page.
- Title Display: toggle on or off to display the block title
Content Tab
- Headline: the large text.
- Text: the small text.
- Link: text and URL (can have several); will be displayed as buttons.
Design Tab
- Size: Large or Small. Choose the overall size of the hero unit.
- Background Image: Background images will cover the background color. If your background image does not have enough contrast with the text color, apply an overlay to improve readability.
- Background Color: create a block of color.
- Text Align: left, right, center, left half or right half.
- Text Color: choose one that contrasts with your graphic.
- Link Color: this is the button color. Choose a color that contrasts with your graphic.
Save Block
- Click Add Block when done.
- Click Save layout.
Edit a Hero Unit Block
- Navigate to the page you'd like to update, and click Edit on the page.
- Click on the Layout tab.
- On the right-hand side of each block is a pencil icon button representing the configuration options – click on this, then “Configure” to edit the block.
- Make your edits.
- Click Update.
- Click Save the page.
Note: You may need to hide the sidebar panel to see the right-hand side of the block and the pencil icon button.