Hero banner
Hero
Marketing specificUpdated May 12, 2026
Description
- A hero banner is a large, oversized banner image at the top of a homepage and key landing pages, often containing a primary call-to-action.
- It must contain a strong, clear message that is aligned to Sage’s new tone-of-voice and help users identify what Sage is and what the page is for.
- This is the first prominent place where we want to establish brand value and experience. Do not mix in other brands’ elements.
- Not all sites and pages need hero banners. Page header component is more suited for pages with a task completion purpose. Or in many cases, a simple H1 heading will be sufficient.
Anatomy
Anatomy
Variations
Illustration
This is the preferred hero banner design unless it’s for product specific info page.
Illustration
Image
Use this if suitable hero illustration isn’t available.
Image
Form
Some pages require a user input. For these pages, the form fields should be presented in the hero banner to get the most response.
Form
Responsiveness
320px
768px
1920px
Best practices
A homepage hero at Sage generally contains a mixture of:
• High-quality Photography.
• Video that is engaging to the user.
• Image carousel or slider with a range of images.
• Highly engaging graphic illustrations.
• Headings and text to accompany graphics and visuals, including a CTA.
Technical example
This component is not currently available in Carbon.
It can be used in mockups and conceptual work.
If interested in implementing Hero, please contact us.
Motion
Animated Hero banners are highly effective at increasing user engagement.
Detailed guidelines for animation can be viewed on Motion Guidelines Section.
Homepage mosaic and Flow hero banners
The Sage Flow can be used in Hero banners. For guidance on how to use motion in this way, please refer to the Motion guidelines.
Animated Glossy UIs provide an engaging way of drawing attention to the simplicity and intelligence of our products.
The design and pace of the animation is key to communicating the Sage brand values. Care should be taken to follow the guidelines set out here in the foundation section in order to convey this to the user and to enable a sophisticated and authentic connection to be made.
Animated illustrations create emotive experiences that describe customer benefits.
Refer to the Illustration guidelines for animation guidelines.
| Date | Changes |
|---|---|
| September 2024 | New version created. Previous version archived in the frozen Web design system. |