Hero banners
The Hero banner component introduces the main purpose of an email. It typically appears at the top of the content 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. They support both image-led and text-led designs, ensuring flexibility for different government communications.
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).
- 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 both image–led and text–led approaches. Some variations use imagery to create visual impact, while others rely on colour bands, headings, or lines to deliver a clean and content–focused introduction. Choose the variation that matches the tone, priority, and purpose of the email.
Split layout with image and text (equal halves)
- A balanced two-column layout, with each side taking up equal space.
- One side has an image. The other side includes a heading, supporting text, and a call-to-action (CTA) button.
- Great for showcasing programs or services where image and text share focus.
Wide text area with narrow side band
- A wide content section with a narrow accent column.
- The side column can feature colour, labels or metadata.
- Ideal when text is the primary focus but needs visual structure.
Wide text area with small image column
- A large text area supported by a narrow image panel.
- The image supports the message without dominating.
- Designed for copy-focused content with a CTA.
Text content with thin image or colour strip
- A thin vertical band (image or colour) placed beside the main content.
- Modern, editorial design.
- Best for newsletters or stylish email layouts.
Coloured band with heading and label
- A bold coloured strip featuring a descriptor and heading.
- Simple and impactful.
- Suitable for campaigns or important updates.
Coloured banner with heading, intro and button
- A top-coloured band that includes a heading, intro text, and an outline button
- Visually strong but lightweight—great for campaigns that don’t need heavy imagery.
Full-width image with heading overlay or follow-on
- A wide image across the full layout, with a heading overlaid or placed below.
- High visual impact.
- Ideal for promotions, events or banners in emails.
Large heading for key messages
- A big, bold heading with minimal additional text.
- Useful for urgent updates or announcements that need strong visibility.
Standard heading-led banner
- A heading-led layout with optional supporting content.
- Balanced layout for regular updates or newsletters.
Centre-aligned layout with label and CTA
- Elements are centre-aligned and include a label, heading, supporting text, and CTA button.
- Provides a clean, formal introduction.
Heading with line, intro text and button
- Features a heading underlined by a horizontal line, followed by supporting text and a button.
- Simple, content-first design.
- Ideal where clarity matters more than visuals.
Small descriptor above title
- A short descriptor line placed above the main title.
- Useful for contextualising a topic, program or project.
Heading with button and date
- A clean layout with supporting text, button, and a date beneath
- Works well for event updates or time-sensitive content.
Heading with button, framed by lines
- A horizontal-line-styled banner with a heading, brief text and CTA.
- Great for single-focus campaign messages.
Heading supported by date line
- A simple heading with a date beneath it.
- Works well for announcements or scheduled updates.
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.