Hero Section
The prominent introductory section at the top of a page that communicates the primary value proposition.
Plain English
The hero section has one job: make the visitor understand what the product is and why they should care — before they scroll. It is the highest-stakes real estate on any page. A great hero has a clear, specific headline (not "We make things better"), a supporting subheadline that adds detail, a primary CTA, and enough visual contrast to draw the eye to the headline first. Everything else is decoration.
Technical
Typical hero structure: full-width section, min-height: 60-100vh (or fixed height 600-800px), centred or left-aligned content block, large headline (48-80px), subheadline (18-24px), 1-2 CTA buttons, optional background image/video/illustration. The content block usually has max-width: 700-900px. For background images: use position: relative on the section, absolute-positioned image with object-fit: cover, and a gradient overlay for text contrast. Above-the-fold performance is critical — lazy-load nothing in the hero.
Live Demo
Hero Section Patterns
1. Centered hero
UI/UX Playbook
Design with Confidence
A visual guide to the principles behind great interfaces.
2. Split hero — text + visual
New
Design with Confidence
Learn the principles that make great products great.
3. Minimal hero — headline only
Design with
Confidence.
Hero sections have 5 seconds to communicate value. One headline, one CTA, one image.
Usage
✓ Good usage
A hero with a 64px bold headline, 20px subheadline, primary + secondary CTA, 120px vertical padding, and a subtle gradient background — clear, confident, instantly readable.
✗ Bad usage
A hero with a 3-sentence tagline, 8 navigation links, a video background, 4 CTA buttons, and a live counter — too much competing for the same attention.
Recommended values
- Height: min-height: 60vh to 100vh, or fixed 600-800px
- Headline: 48-80px, maximum visual weight
- Subheadline: 18-24px, muted
- Content max-width: 700-900px (centred or left)
- CTA: primary + optional secondary
- Vertical padding: 80-160px
Common mistakes
- Vague headlines ("We empower teams") that say nothing specific.
- Too many CTAs — one primary action, one optional secondary maximum.
- Hero image that reduces text contrast — always add a gradient overlay.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Hero section: min-height 70vh, 120px vertical padding, centred content at max-width 800px. Headline: 64px / 700 weight / -0.03em tracking. Subheadline: 20px / 400 weight / muted colour. One primary CTA + one secondary link. Background: subtle gradient.