The hero component is a page section that holds a central position on a page. The hero provides necessary context about the page.


The hero component is a page section that holds a central position on a page, found at the top of the screen under the header. It serves to introduce the purpose of the page by providing helpful content such as a title, additional copy, an image, and a CTA.



View of the hero with markers numbering 1-3
  1. Teaser: Section of content that can include multiple pieces of text including a pretitle, title and body copy

  2. Call to Action: Optional CTA with several options of actions a user can take.

  3. Image (optional)



The hero can be configured many different ways to suit the needs of the page. The hero accommodates desktop and mobile breakpoints, including tablet and phone.


Image Justification:

On desktop, the image can appear on the left or on the right. On mobile breakpoints, the image is always on top.


CTA Options:

The following CTAs can be used in the hero component:

  • None
  • Button
  • Button Group
  • Link


Desktop Breakpoints (Large, Medium)

The hero component spans 5 columns of the 12 column grid.

View of the hero on desktop with the 12 column grid overlayed on top

Mobile Breakpoints (Small, X-Small)

The hero component spans 6 columns of the grid for the Small breakpoint and 4 columns of the grid for the X-Small breakpoint.

View of the hero on tablet view and phone view with their respective column layouts