...
Use when using a Hero - News block to hide breadcrumbs from the Newsroom page.
See Additional Notes at the bottom for a special use case.
...
Use sparingly.
- Images repeater - add a row for each image
- Image
- Use images with the same file dimensions
- Animated text
- Max 40 characters
- Make sure content is wrapped inside HTML tags
- Default value is set to <p class="display-2">Add text here</p>
- Use existing styling classes for this content
- "display-#" classes to modify the font size; change "display-2" to a larger number, such as "display-4" if you want the text to be smaller
- Preview on mobile to make sure text displays properly over image
- Image
Images
- Make sure all images are high quality and around 2400x1200. Height can vary for these.
- If there are people in the photo, make sure their faces are vertically centered. You can crop the image or request a designer's help for this.
...
- Add supporting copy to introduce the page.
- We typically add copy to parent pages (aka: program landing pages).
- Keep copy short, up to 40 words max.
- We typically add copy to parent pages (aka: program landing pages).
Link
- Add a link to the hero.
- Buttons are typically either application links or a link to a form to request more information about a program (aka: RFI).
- Enable to display the breadcrumbs of for a page.
- Some parent pages with no subpages do not need to display breadcrumbs (see Diversity, Equity, and Inclusion and About pages for example).
Additional Notes
- Even if the hero block doesn't work on for a particular page, you may want to add the block with no content and check the "Hide breadcrumbs" option.
- In some cases, such as for Update magazine issue landing pages, the image for the Hero doesn't work within the block. You can add the image before the Hero (in either the WordPress Image block or as HTML with the Custom HTML Wordpress widget), not select a Type, not add any Title or Copy, and disable breadcrumbs.
- This will allow you to display an image as the page banner. This will also remove the black-text H1 that appears by default without a Hero on the page. See Update Fall 2020 as an example.
...