Hero banners
The Hero banner component introduces the main purpose of an email. It is a primary opening module that appears near the top and combines headings, supporting text, imagery, and calls to action.
Hero banners set the tone and hierarchy of the communication, helping recipients understand the most important message quickly. In this section, hero examples are focused on strong opening layouts and campaign-led presentation.
When to use
Use a hero banner when you need to:
- highlight the primary message of the email
- create a strong visual opening with imagery or colour
- include a clear call to action linked to the main message
- set the context for newsletters, announcements, or campaigns.
When not to use
Avoid using hero banners for:
- minor updates or secondary messages (use Cards or Features)
- basic introductory text blocks and letter-style body messaging (use Content blocks for those patterns)
- transactional or compliance-only emails where branding should remain minimal
- decorative purposes without meaningful content.
Layout options
Hero banners are available in a range of layouts to support image-led, banded, and CTA-focused opening treatments. Choose the variation that best matches the tone, priority, and purpose of the email's primary message.
6-6 split with image
Balanced hero with equal space for image and message.
9-3 band
Wide copy area with a narrow colour band for light structure.
9-3 image split
Wide copy area with a slim supporting image column.
9-3 thin band
Editorial hero layout with a thin visual strip beside the content.
Banded heading
Banded heading treatment for campaigns and high-priority updates.
Banded heading with button
Banded hero with intro copy and an outline CTA.
Full-width image
High-impact hero with a full-width image and heading treatment.
Centred label and CTA
Centred opening layout with label, heading, copy and CTA.
Underlined heading with button
Text-led hero with an underlined heading and CTA.
Descriptor over heading
Compact hero that adds context with a short descriptor line.
Heading, date and button
Straightforward hero for event or time-sensitive announcements.
Framed heading with button
Line-framed heading treatment for single-focus messages.
Heading with date
Minimal hero with heading and date emphasis.
Banner heading
Reusable heading-led banner for in-flow sections.
Large banner heading
Larger heading-led banner for stronger section breaks.
Highlighted heading with date
Highlighted heading treatment with a supporting date line.
Heading, body, button and date
Full text-led hero with body copy, CTA and date.
Design guidance
- Always ensure headings are short and scannable.
- Use one clear CTA in the hero banner — multiple actions reduce impact.
- If using images, ensure they are optimised for email and provide descriptive alt text.
- Use colour bands sparingly to add hierarchy without overwhelming the content.
- Test across clients to ensure banners stack well on mobile.