Design
What is a hero section?
A hero section is the block at the top of a web page, holding the headline, supporting line, and primary action that a visitor sees before scrolling.
New to Bolt? Sign up free.
Technical definition
The hero section occupies the top of a page, directly under the navigation. It conventionally contains a headline stating the page's proposition, a subhead giving the mechanism or qualifier, one primary call to action, and often a supporting image, illustration, or product view.
Because the hero contains the largest visible element on most pages, it usually determines a page's Largest Contentful Paint score. An oversized hero image is the most common reason a page fails that metric.
In plain terms
It is the top of the page, before anyone scrolls. One headline, one sentence under it, one button.
Most visitors decide whether to keep reading based on this block alone. Everything below it is for the people the hero convinced.
Why it matters
The hero is where small business sites lose the most visitors, and the cause is almost always a vague headline. Delivering excellence since 1998 tells a visitor nothing. Emergency plumbing across North Portland, on site within two hours tells them whether to keep reading.
Two constraints make heroes work. Give it one action, not three, because a hero offering Book now, Get a quote, and Learn more offers no direction at all. And check it on a phone, where a hero that looks balanced on a laptop often pushes the button below the visible area. The headline that works is the one that names who you serve and what they get.
