Hero Section

## What it is

The hero section is the first full-width content block on a page, built to tell a visitor where they are, what they can get, and what to do next before they decide to scroll or bail. It is not the prettiest part of the page. It is the most load-bearing.

This sounds deceptively simple until you are staring at a blank Figma frame trying to make it work. The hero is the intersection of brand identity, copywriting, and UX direction, all negotiating with each other inside a single rectangular layout. Strip away the tools and you have three questions every visitor asks in the first three seconds: Is this for me? Do I believe you? What do I do now? Every element in the hero either answers one of those questions or it is noise. The visual treatment sets mood and brand signal. The headline answers "what is this." The subhead handles "why should I care." The CTA answers "what now." That is the complete job description. Anything that does not map to one of those three outputs is clutter.

Modern usage has stretched the term beyond its editorial roots. In print, a hero was simply the dominant image on a spread. On the web, it became structural shorthand for the first viewport. Now the term covers SaaS landing pages, mobile app onboarding screens, marketing site headers, campaign microsites, and the feature introduction blocks inside product apps. The geometry changes. The context changes. The three-question job description does not.

## What it isn't

A hero section is not a banner. Banners are transient, promotional, and designed to rotate. A hero is structural. You do not swap a hero out for a seasonal promotion and then swap it back in January. If you are rotating it on a timer, you built a banner and called it something that sounds more important.

It is not a background image with text on top. That is the most common implementation, not the definition. Stripe's hero has run as black type on a gradient with no photography. Apple's product heroes are frequently product on white with three words and white space doing the heavy lifting. Linear used a dark canvas, a single sentence, and an animated component demo. None of those follow the "photo plus headline plus overlay" template. The visual treatment is a design choice. It is not what makes something a hero.

It is not the homepage's entire job. A hero that tries to explain everything explains nothing. If a visitor has to read six bullet points above the fold to understand what the product does, the hero already failed before copy even entered the equation. This is exactly where B2B SaaS sites collapse: the hero gets packed with feature callouts, use case tabs, social proof badges, and partner logos because someone on the team was afraid to leave anything out. All of that belongs two scrolls down. The hero's job is to get them to scroll, not to replace the rest of the page.

It is also not always the place for a headline. Some of the most effective heroes are non-verbal: a product running in real time, an interface demo looping, an animation that demonstrates value before a single word is processed. Framer's early homepage prioritized showing the product working. The headline was almost a footnote. When the product is visually self-evident, let it speak first.

## A concrete example

Notion's 2023 homepage hero is a clean case study in restraint. White background. A short campaign-specific headline. One subhead sentence clarifying the value prop. Two CTAs: "Get Notion free" and a secondary for teams. No illustration. No product screenshot loaded into the viewport. No bullet list of features competing for attention.

The hero answers all three visitor questions in under twelve words of headline copy. Is this for me? "Your connected workspace" handles the category and the aspiration. Do I believe you? Brand recognition carries most of that weight; the logo does not need to explain itself. What do I do now? The CTAs are the only interactive elements in the first viewport. Nothing competes with them. The visual hierarchy is unambiguous because the layout does not give the eye a second destination.

Contrast that with a competing product at roughly the same time that had a headline, a subhead, a three-column feature grid with icons, two product screenshots floated side by side, a social proof badge with a review score, and a partner logo strip, all above the fold at 1440 wide. You could not identify the primary CTA without stopping to count. That is not a hero section. That is a panic attack formatted as HTML.

## When to use it (and when not to)

Use a hero on any page where the visitor arrives without guaranteed context. Landing pages, homepages, campaign pages, product feature pages, and app onboarding screens all qualify. The rule is simple: if the visitor might not know where they are or what they should do next, the hero earns its place.

Do not use one on internal pages where the user is already authenticated and oriented. A dashboard does not need a hero. A settings panel does not need a hero. A task management view does not need a hero. Adding a hero to an authenticated state signals that the page was designed from a marketing template, not from the user's actual task context. It wastes the first viewport on orientation that the product itself should already be providing.

Be cautious on deep content pages. A blog post with a large hero image above the article is not a hero section doing UX work. It is decoration eating scroll real estate. Some editorial outlets justify it because the image is high-craft and sets tonal context for the piece. Most sites get it wrong because the image is generic stock and the reader has to scroll past it to reach the reason they clicked the link.

When the hero is the only thing that matters on a page, give it everything and get the rest of the page out of the way. The approach where type fills the entire first viewport is not a style choice. It is a hierarchy choice. When the brand signal and the value proposition are strong enough to stand alone, adding anything else dilutes them.

## The one-line takeaway

A hero section earns its name by answering three questions in three seconds: who this is for, why it matters, and what to do next.