Hero

Text hero

Showing: Text hero with optional text callout

Variants

Heading size

Text hero uses Statement 2 — a bold, prominent heading suitable for impactful page entries while remaining adaptable to longer headlines.

Spacing

Text hero spacing is driven by the component height rather than fixed vertical gaps.

• Top and bottom padding use the xl spacing token
• The space between the heading area and the bottom content area is calculated from the component height, so it grows/shrinks with viewport size

Examples

Media hero

Showing: Media hero with optional text callout

Variants

Ratios

The media hero includes multiple media ratios to allow for compact and tall layouts.

Showing: 21:9, 3:2 and 1:1 ratio variants.

Heading size

Media hero supports two heading sizes:

Statement 1 for launch moments and short, bold headlines

Statement 3 for longer headings or when the hero should feel less dominant

Showing: Statement 1 variant.

Showing: Statement 3 variant.

Media type

The media hero includes two media types to allow for image and video.

Showing: Image and Video variants

Spacing

Media hero on breakpoints lg and xl uses gutter spacer between the heading column and the body/actions column.

On md and sm breakpoints the spacer between heading, body text and actions is 24px (vertical).

Examples

Considerations

Page placement

Tip

Heroes are page entry points. If you need multiple callouts further down the page, use banners or cards instead.

Do

Do use one hero at the top of a page as the entry point.

Don’t

Don’t stack multiple heroes or use more than two actions.

Content length

Keep copy short: heading 1–2 lines, body 1–3 short lines (optional), and short action labels.

Do

Do keep headings short and actions specific.

Don’t

Don’t add paragraphs or multiple text blocks competing for attention.

Media cropping

Media will crop differently across breakpoints. Keep important subjects away from the edges so the hero works on all screen sizes.