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.

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.