Hero

Design

A block that spans full-width. 

Jumbotron with link	Jumbotron with no link

Use Cases

Use as the first block to introduce a page.

Use when using a Hero - News block.

See Additional Notes at the bottom for a special use case. 

Fields

Type 

• Choose between a Jumbotron, 50/50 Split or Pattern. 
  • Note: With a Jumbotron and 50/50 Split, you can add an image. Make sure the image is high-quality and around 2400x1200.
  • Note: With Pattern, you can add a Micro Title (usually a tagline or a secondary title) above the H1. 
    • With Pattern, choose between a Gray, White, Blue or Red background. 

Title 

• Add the H1 of the page.
  • Note: Without a Hero, the page will display the title of the page as a black-text H1. 

Copy

• Add copy to introduce the page. 
  • Note: We usually add copy to parent pages. 
    • Keep copy short, up to 40 words. 

Link

• Add a link to the page. 
  • Note: Buttons are either application links or links to a form to request more information about a program. 

Display Breadcrumbs

• Enable to display the breadcrumbs of a page. 
  • Note: Some parent pages with no subpages do not need to display breadcrumbs (see Diversity, Equity, and Inclusion and About pages for example). 

Additional Notes

In some cases, 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.