The hero is the first impression on many pages: it answers what this is about and what to do next (apply, learn more, register, watch). Authors shape message, media, and actions; designers shape height, contrast, and layout so text stays readable on photography or video. Some experiences rotate between more than one hero to highlight different stories while keeping the same pattern.

Height and media choices control how much of the viewport the banner uses and how strong the visual feels. Primary and secondary actions should feel distinct so people know which step matters most.

When multiple heroes sit in a rotating region, visitors may see one hero at a time with a predictable way to move between them (implementation varies; see Code). Always provide a usable experience when motion or script is not available.

1. Banner region with background image or video and optional overlays to keep text legible.
2. Text stack: title, short supporting line, optional credit line for photography.
3. Actions: up to two buttons (primary and secondary roles).

Replace with image hero, video hero, and rotate context.

• Keep the title specific to the page or campaign; avoid generic slogans that could apply anywhere.
• Keep the subtitle short; move long explanations into the body below the hero.
• Use photo credit as a light line; meaningful image description still belongs in alt text and DAM practices where applicable.
• Write button labels that match the destination or outcome; add a clearer accessible name only when the visible label is too short to stand alone.

• Top of section, program, or campaign pages where a strong visual and a clear primary action help people orient and act.
• Template-driven landing experiences that already use the hero pattern.

• Pages that are dense with data or forms and do not need a large visual; consider a simpler Title or header only.
• Situations with several competing primary actions on one screen; narrow to one main CTA per view where possible.

Do

• Check readability on both light and dark areas of the image; use overlays or gradients when needed.
• Give buttons specific, verb-led labels.
• Test on mobile so tall heroes do not push critical content too far down.

Don't

• Stack many full heroes in a row without a strong editorial reason; it hurts scanning on small screens.
• Rely on the background alone to carry meaning; the headline should still work without the image.