Hero section examples: four that pass the five-second test, and three that fail
Seven hero sections from well-known websites, read the way a first-time visitor reads them: headline, subline, button and image, in five seconds. Four tell a stranger what the product is, who it is for, why it helps and what to click. Three miss at least one of those, and the reason is never the look of the page. Each example ends with what to copy or what to avoid on your own hero.
By Anthony Roose
7 min read
How we read these hero sections
We captured each homepage on 27 October 2026 in a desktop window of 1440 by 900 pixels, the first screen a laptop visitor sees. Then we checked each hero against the four questions from our guide on what a hero section is: what is this, is it for me, why bother, and what do I do now?
A first look is enough for this check. Lindgaard and colleagues measured that people form a stable first impression of a web page in about 50 milliseconds.
Heroes change often, so treat each example as a snapshot of that day. Notion, Linear and Framer also appear in 5sec.io teardowns from 31 August 2026. That lets us show one hero before and after a rewrite.
Hero section examples that pass
1. Wise: the benefit is the headline
Headline: “The international account that saves you money.” Subline: “Everything you need to send, spend and manage your money worldwide. Low fees. Lightning-fast. 100% transparent.” Buttons: “Open an account in minutes” and a quieter “Send money now”.
In eight words the headline names the category, an international account, and the gain: it saves you money. The subline lists three jobs a visitor recognises. The primary button says what happens and how long it takes.
What to copy: put the benefit in the headline, not in the third section. Most heroes say what they are. Few say what the visitor gets.
2. Calendly: the button removes the last doubt
Headline: “All the work around meetings, handled.” Subline: “From AI-powered scheduling to automated meeting recaps and follow-ups, get the busywork done with fewer tools and less effort.” Buttons: “Sign up with Google” and “Sign up with Microsoft”, with “No credit card required” underneath.
The headline is light on detail, and the subline fills the gap with three concrete tasks. The buttons do the strongest work. They name an account the visitor already has, and the line below them answers the question every free trial raises.
What to copy: answer the main objection next to the button. One short line about cost or effort does more than a paragraph further down.
3. Framer: the same hero, rewritten
On 31 August the 5sec.io teardown of framer.com scored the fold 6 out of 12. The headline read “Framer is the AI design agent for every step from idea to launch”. The word “website” appeared nowhere in the first screen of a website builder, and the subline that explained the product sat below the fold.
On 27 October the headline reads “Framer is the pro website builder with a world-class design agent”. The subline now sits in the first screen: “Every change the agent makes stays editable on a real design canvas, with hosting, CMS, analytics, SEO, and AEO built in. Free to start for any type of site.” The “Get started for free” button stayed where it was.
What to copy: the fix was not a redesign. Framer named its category in plain words and moved the explanation up. Moving existing copy up is also the fix we write most often in 5sec.io audits.
4. Basecamp: clear headline, busy surroundings
Headline: “Manage projects, coordinate teams, and master your company with Basecamp.” Beside it sits a screenshot of a real project with a message board, tasks and deadlines. That answers what this is and who it is for, for any team that runs projects.
The catch: seven lines of links sit above the headline, from “Pricing & sign up” to a live count of people working in Basecamp. The eye meets a list before it meets the promise. The sign-up button sits in the top-right corner, far from the headline.
What to copy: a screenshot of real work. What to avoid: a menu the visitor has to read before the headline.
In short A hero passes when the headline names what you offer, one line says what changes for the visitor, and one button says what happens next.
Hero section examples that fail
5. Notion: the key word will not hold still
Headline: “Where teams and agents ___ together.” The blank is a green pill that cycles through words. On 27 October the page source started on “Think” and our screenshot showed “Ship”. In the August teardown the capture caught the word mid-animation as “Scal”.
The rest of the hero is strong. The subline, “Capture context, find answers, and automate tasks with AI built for your team”, explains the product. “Get Notion free” is the clear primary button, with “Request a demo” quieter beside it. The August teardown scored the fold 8 out of 12.
What to avoid: animating the one word that carries the promise. The browser tab reads “The AI workspace that works for you.” That line says what Notion is, and it appears nowhere in the hero.
6. Linear: no button in the hero
Headline: “The product development system for teams and agents”. Subline: “Purpose-built for planning and building products. Designed for the AI era.” Below it, a screenshot of the product with real issues and activity.
The headline names the category, and the screenshot shows real work. But the hero holds no button. The only ways to act are a small “Sign up” pill in the navigation and a “New Loops” announcement link. The August teardown found the same gap and scored the fold 7 out of 12.
What to avoid: trusting visitors to find the navigation. A brand people already talk about gets away with it. Most sites do not. The subline also repeats the category instead of naming an outcome.
7. Shopify: a slogan over a video
Headline: “Be the next household name”. The end of the line changes: the page source starts on “Be the next AI all-star”. Subline: “Dream big and build fast on Shopify. The world’s best commerce platform.” Behind the text plays a full-width video, which on our capture showed a warehouse aisle.
A visitor who does not know Shopify learns from the headline that it is about ambition. Only the last words of the subline name the category. The plain sentence, “Sell everywhere people shop. Online and in person.”, starts at the bottom edge of the first screen. “Start for free” is a clear button.
What to avoid: a headline that only works for visitors who already know you. Nielsen Norman Group found that visitors ignore images that carry no information. A video loop costs the most attention and explains the least.
What the seven hero sections have in common
| Example | What is this? | Is it for me? | Why bother? | What do I do? |
|---|---|---|---|---|
| Wise | Pass | Pass | Pass | Pass |
| Calendly | Partial | Pass | Pass | Pass |
| Framer | Pass | Partial | Partial | Pass |
| Basecamp | Pass | Pass | Partial | Partial |
| Notion | Partial | Partial | Partial | Pass |
| Linear | Pass | Partial | Fail | Fail |
| Shopify | Fail | Fail | Partial | Pass |
Every passing hero names its category in words a stranger uses: international account, meetings, website builder, projects. Every failing hero leans on a slogan or leaves out a step.
“Why bother?” is the question most heroes skip. Only Wise and Calendly say what changes for the visitor. The August teardowns found the same pattern: naming the category is easy, naming the consequence is hard.
None of the failures is a design problem. All seven pages look good. The weak heroes fail on words, order and motion, and those are the cheapest parts to fix.
How to check your own hero section
- Open your homepage on a laptop and on a phone. Take a screenshot of the first screen only.
- Show it to someone outside your company for five seconds. Ask what you offer, who it is for and what they would click.
- Write their answers next to the four questions. Each blank points to one element: headline, subline, proof or button.
- Fix the words first. Move existing copy up before you write new copy, as Framer did.
Without a tester, the free five-second test on 5sec.io reads your live page the way a first-time visitor does and quotes the evidence it found. For a whole site, the Above the Fold Audit scores about fifteen key pages and rewrites the weakest copy. Read what above the fold means if your hero does not fit on a phone screen.
Does your hero pass?
The free test reads your first screen the way a new visitor does and tells you which of the four questions it answers.