Hero Panel

Hero Panels

Making a bold statement

Why use Hero Panels?

Hero Panels are a great way of making a highly visual statement for a page title and call-to-action buttons.

Use simple text and bold, clear images to make a big impact.

You have options for panel height, image brightness and position, text colour and position, and buttons.

This page gives some examples of how you can use those options to give different results.

Stacked Hero Panels?

You might notice that we haven't broken up the Hero Panels on this page with text or cards. But it still looks ok.

Often it's a good idea to mix things up with different panels, although a stack of Hero Panels as we've used on this page can work if you choose your images well.


Say something simple


Use abstract images to help give an overall feel


Better for abstract images


Standard height panel


Try different panel heights and image brightness

Dark text

Some images work better with dark text


Using a Kent angle design element

Angle colours

Use colours to work with each other

Bigger buttons

Sometimes you just need a bigger button