Examples of our banners

Image based banner
Colour based banner

Anatomy of a hero banner

A hero banner should answer three simple questions:

1. What is it?

Use only relevant pictures/illustrations/...

Is this image relevant to my visitors and the offering they are looking to purchase?

It’s important to choose pictures that fit the purpose of your product. When you choose the wrong image you give your visitors a wrong message. But when you pick the right one, your visitors will know what you offer without reading the text.


Use a clear headline to draw attention

Make it clear. Aim for clarity over fancy words or phrases.
Don’t overhype your business or product.
Be very specific and direct. Say what it really is. You can elaborate on underlying or detail pages.

2. What's in it for me?

Use a sub-headline to expand upon the headline

Two questions a sub-headline should answer:

  • Why should a user choose to buy from you?
  • What benefits can they expect if they buy from you?

3. Where am I going?

Usa a CTA button that stands out

Your CTA should be the most prominent thing on the banner so that visitors see it right away.

  • use bright contrasting colors
  • every other button should be given less importance


The copy on your button should inform the visitors of what will happen or what they will get.
Don’t use generic terms (submit, download, click here) but specific copy to engage like ‘Get in touch’, ‘Book a discovery call’, ‘Sign up now’. Complete the sentence ‘I want to ...’ to come up with a good call to action.

How to avoid banner blindness

  • Integrate banners seamlessly with page styles (typography, text colour, background colour)
  • Avoid visual borders or similar visual boxing
  • Avoid using animation
  • Avoid placing ads and any ad-looking content in prime content locations on the homepage
  • Content near ads/banners is at risk of being ignored too
  • Don’t use embedded text in images (responsive & accessibility issues)
  • Ensure text vs background colour contrast

Source file for hero banners

This Figma file should help you to

  • generate the correct image assets for image based hero banners
  • give you a clear view on how colour based image banners will look when implemented by our content coordinators


Download the hero banner source file

How to open the file

In your Figma home screen

  • Click on 'Drafts'
  • Import file


Changelog Hero Banner Template


Date Version Description
17 oktober 2022 1.0
  • Up to date template file