Hero sections: how to design the top of your page

The 'hero' is the large section at the top of a page — usually a headline, supporting text, an image, and a call to action. It's prime real estate, and getting it right sets up everything below.

What a strong hero includes

• •A clear headline: what you do and for whom.
• •A short supporting line with the key benefit.
• •One obvious call to action.
• •A relevant image that reinforces the message.

Common hero mistakes

Vague slogans, slow-loading giant images, sliders nobody reads, and no clear next step. Keep it fast, clear, and focused — the hero should make a stranger understand and want to act within seconds.