Anatomy of a hero section
The hero is the first thing people see on a page, before they decide whether to scroll. In a few seconds it has to say what the product is, who it’s for and what to do next. Most heroes are built from the same six parts, arranged in different ways.
Common layouts
The same parts, arranged four ways. Pick one to take it apart below.
The parts of a hero section
Announcement
OptionalA short link above the headline that points at something new: a launch, a feature, a funding round. It gives returning visitors a reason to look again. Keep it to one line, and make it go somewhere specific.
Headline
The promise, in as few words as it takes. Strong headlines name an outcome the reader wants rather than the category the product sits in. If a competitor could use the same line, it isn’t specific enough yet.
Subheadline
One or two sentences that make the headline concrete: who it’s for, what it does and how. The detail lives here, so the headline can stay short.
Calls to action
One primary action, usually to sign up or start a trial, and an optional quieter one for people who aren’t ready yet, like booking a demo or seeing pricing. After the headline, the primary button should be the easiest thing to spot.
Social proof
OptionalCustomer logos, a rating, a user count or a one-line quote, placed close to the buttons. It answers the question people have right before they click: who else uses this?
Product visual
A screenshot, short video or live demo that shows the product in use. A real interface helps people picture themselves using it in a way abstract art can’t. In a split layout it sits beside the text; in a centered one it sits below and often runs past the fold.
What good heroes do
Lead with the outcome
Say what changes for the reader, not which category you’re in. “Ship docs your team actually reads” says more than “Documentation platform”.
Give one action the spotlight
Make the primary button the most prominent control and keep any second action visibly quieter. Two equal buttons ask people to choose before they’ve decided anything.
Show the real product
Use a real screenshot or a short loop of the interface, cropped to the part that matters. Abstract shapes and stock 3D say “tech company” and nothing else.
Fit the first screen
On a laptop and on a phone, the headline, subheadline and primary action should all be visible without scrolling. The visual can run past the fold; the action can’t.
Hero section questions
Keep the heroes that catch your eye
Save hero sections from any website with the Shelf extension, then find them again by type or tag when you design your next page.