Hero
What is a hero block?
Prominently place a hero or a large format image on your website landing pages. Optionally add additional slides.
This is an example of a Hero component
Topic Category
Short teaser with engaging details about the topic, for example, department news, an upcoming event, or a new resource or publication.
This is the second slide
Topic Category
Short teaser with engaging details about the topic, for example, department news, an upcoming event, or a new resource or publication.
Hero Pagination
How to add a hero:
- In the page edit view, add a new block called Hero.
- A Hero block with a Hero Item block nested inside will be created.
- Fill out the first hero item by adding the Eyebrow, Heading and/or Body. You can also add/configure the following by using the block settings on the right sidebar:
- Background image: Add an image to sit behind the heading/body text, as well as alt text by using the Alt override field.
- Heading level: Select the heading level which fits in your content’s hierarchy.
- Text block alignment: Choose left, center or right alignment.
- To add more hero items, select the parent hero block, then click the plus sign at the lower right.
- Select the parent hero block to show further configuration options in the block settings in the right sidebar:
- Style: Select Floating (text floats over image) vs Stacked (text sits below image). Note: the preview will not update in the block editor, but it will on the published page.
- Change the width/alignment or color scheme.