Hero banners

Hero banners can be effective when they provide a solution to a top task or deliver priority information to a user.

Best practices

• Only use hero banners on a home page or section/category landing pages. Overuse of hero banners may diminish their efficacy and contribute to ‘banner blindness.’
• Think carefully before using a carousel or rotating banner. Rotating banners are not an effective way to communicate key messages. Analytics rarely show more than 1% of homepage visits clicking or tapping a rotating banner slide.
• Ensure the hero banner includes a clear call to action that aligns with an important task or message.
• Choose a strong image that fits the theme, purpose, or task enabled by the hero banner.
• Perform accessibility checks to ensure any text placed over the banner passes Level AA WCAG Colour Contrast Requirements.