Hero section

A hero section is the prominent opening area of a page, introducing its subject and often its main action.

Browse more examples →
From the collection

What it means

It can combine a heading, supporting copy, imagery and a call to action. A hero does not have to fill the viewport or use a large picture. Its structure should make the purpose of the website clear and give visitors a reason to continue.

Use it in practice

Prioritize the message and the next useful step. Choose imagery that supports the offer rather than competing with it.

Watch out for

A visually dramatic introduction can still fail if visitors cannot tell what is offered. Avoid pushing every useful detail far below the opening screen.