Overview
The hero section is the first thing visitors see when they land on your page. It has approximately 5 seconds to communicate your value proposition and compel users to continue reading or take action.
The hero section is your first and most important opportunity to communicate value. It appears above the fold and sets expectations for everything below.
Effective heroes answer three questions immediately: What is this? Who is it for? Why should I care?
Visual hierarchy matters: users scan in an F-pattern, so your headline, subheadline, and CTA placement should guide their eyes naturally.
Hero sections work best when they're specific rather than generic. Avoid vague claims like "the best solution" in favor of concrete outcomes.
Best practices
Actionable guidelines to implement this component effectively.
- Lead with a concrete outcome (not a feature list). Pair it with a short clarifying subheadline.
- Use one dominant CTA and one secondary CTA (e.g., "See examples", "Watch demo").
- Show proof early: customer logos, a credible metric, or a testimonial snippet near the fold.
- Avoid stock visuals; show the product or a clear illustration of the value.
- Keep headlines under 60 characters for optimal readability and SEO.
- Use active, benefit-focused language: "Ship faster" not "Our platform enables faster shipping".
- Include social proof elements (logos, metrics, testimonials) but keep them subtle: they should support, not compete with your headline.
Common patterns
Popular variations and approaches you'll see across successful SaaS sites.
Product screenshot hero
Shows the actual product interface. Best when the product is visual and the UI is impressive.
- •Figma: Shows the design tool interface
- •Notion: Displays the workspace interface
Illustration + headline
Uses custom illustrations or graphics to represent the value proposition. Good for abstract concepts or when product UI isn't visually impressive.
- •Stripe: Abstract financial infrastructure illustrations
- •Linear: Minimal geometric illustrations
Video background
Autoplay video (muted, looping) showing product in action. High impact but can be distracting if overused.
- •Apple: Product videos in hero sections
- •Loom: Screen recording tool showing itself
Animated demo
Interactive or animated product demo embedded in hero. Great for showing workflows and interactions.
- •Framer: Interactive design tool demo
- •Webflow: Visual website builder preview
Examples
Real-world implementations from top SaaS companies.
Linear
View site →Clear headline: "The issue tracking tool you'll enjoy using". Includes product screenshot, single CTA, and customer logos below.
Stripe
View site →Powerful headline focused on outcomes: "Financial infrastructure for the internet". Clean, professional, with clear CTAs.
Vercel
View site →Developer-focused: "Develop. Preview. Ship." with animated code example. Shows the workflow visually.
Screenshots from website breakdowns
Real captures of this component from analyzed SaaS sites. Click through to see the full breakdown.
Accessibility considerations
Ensure your component is usable by everyone.
- Ensure sufficient color contrast between text and background images or gradients.
- If using autoplay video, provide controls to pause/play and ensure it doesn't interfere with screen readers.
- Include alt text for hero images or ensure decorative images are marked as such.
- Make sure CTAs are keyboard accessible and have clear focus states.
- Test with screen readers to ensure headline hierarchy (h1) is properly announced.
- Avoid flashing or rapidly changing content that could trigger seizures (WCAG 2.3.1).
- Provide text alternatives for any information conveyed only through images or animations.