1. Home
  2. Design System
  3. Components
  4. Hero

Hero

A hero promotes a key page or encourages a user to take an action.

Where it displays: Homepage, at the top of the page

Required or optional: Required

Use: For news or announcements

Don’t use: On internal landing pages

Fields

Name of Field Required/Optional Case Character Count Number (min/max) Size Details

Title

Required

 Title Case

Maximum 40

1

  

 

Subtitle

Optional

 Sentence Case Maximum 95

0-1

 

  

Button

Optional

Sentence Case

 Maximum 20

0-1

 

  

Image

 Required     1 2000x800 focus just right of center - edges will be cut off at different widths

Example

Wide Screen

An example of a Hero component. It has a box with a title, subtitle, and button. To the right of the box is an image of a smiling person holding a baby.
Hero Image Guidance Desktop

Medium Screen

An example of a Hero component. It’s the same as the previous example, but narrower, and the image is only of a baby.
Hero Image Guidance Tablet

Narrow Screen

An example of a Hero component for a narrow screen. It has a title, subtitle, and button in a box, but with no image.
Hero Image Guidance Mobile

Live examples

Blood Stem Cell - Title and subtitle

An example of a Hero component on a page. This component has a title, subtitle, and image, but no button.

Newborn Screening - Title only

An example of a Hero component on a page. This component has a title and image, but no subtitle or button.
Date Last Reviewed: