The prominent, above-the-fold area of a webpage or screen — typically occupying the full viewport width — that delivers the primary value proposition, key visual, and main call to action. The hero section has one job: communicate who the product is for and what it does, quickly enough that users decide to stay and explore.
Common contexts
- Designing a SaaS landing page where the headline must communicate the core value proposition to a cold audience in under five seconds
- Rebuilding a homepage hero after analytics show high bounce rates suggesting the current message isn't resonating with new visitors
- A/B testing two hero headline variations to determine which drives more free trial signups from paid traffic
Use when
Any time a page must make a strong first impression with users who arrive with no prior context — particularly marketing pages, product landing pages, and onboarding entry points where the hero directly influences whether users continue.
Avoid when
Don't apply a full-bleed hero layout to internal tools, dashboards, or task-focused interfaces where users arrive with intent and need immediate access to functionality — a prominent hero in those contexts delays the actual work.
Most hero sections fail not because the design is weak but because the headline is written by someone who already understands the product — test your hero copy with someone who has never heard of your product and time how long it takes them to explain it back to you.
Real-world examples
- Airbnb's hero section A/B tests revealed that showing a real destination photo with a search bar overlay outperformed a lifestyle photo without a search bar by 18% on booking intent — a finding that locked in their homepage layout for years.
- Stripe's homepage hero is a developer-targeted code snippet paired with a one-line value proposition ('Payments infrastructure for the internet'), a hero format that tests consistently higher with technical audiences than product screenshots.
- Apple's product page heroes use a single full-width device image against a dark or white background with minimal text — a layout studied by brand teams across every premium consumer electronics company as the benchmark for aspirational hero design.