SaaS website examples: what good SaaS sites put above the fold
What Linear, Notion and Basecamp put at the top of their homepages, a pricing page worked through, the Core Web Vitals limits and an above-the-fold checklist.
You are rewriting your SaaS homepage, or building the first one, and a visitor gives you a few seconds to say what the product does. You want to see what established SaaS companies put in that space, and why. “Above the fold” is the part of a page a visitor sees before scrolling. On a SaaS site it usually carries four things: a headline that names the job, one line of detail, one or two calls to action and some proof.
The examples below were read from the live sites on October 17, 2026. Homepages change often, so treat every quote as a dated snapshot, not permanent copy. The guide also covers the pricing page, which visitors often open next, and page speed, which decides how fast the top of the page appears at all. If you are new to the model these companies sell, start with What is SaaS?.
Above the fold in plain terms
Think of a shop window on a busy street. People walking past give it a glance. A good window shows what the shop sells, one reason to come in and an open door. A window crammed with everything the shop has ever stocked gets the same glance and fewer visitors.
A SaaS homepage works the same way:
- The headline is the window display: what the product is, or the job it does.
- The call to action (CTA) is the door: a button such as “Sign up” or “Request a demo”.
- Social proof is the queue outside: customer logos, user counts or quotes that show other people already use it.
Three homepages, read on October 17, 2026
| Element | Linear | Notion | Basecamp |
|---|---|---|---|
| Headline | “The product development system for teams and agents.” | “Where teams and agents Think together.” | “Manage projects, coordinate teams, and master your company with Basecamp.” |
| Sub-headline | “Purpose-built for planning and building products. Designed for the AI era.” | “Capture context, find answers, and automate tasks with AI built for your team.” | “Famously straightforward and easy-to-use, there’s simply nothing else like it.” |
| CTAs at the top | Sign up, Log in, Open app | Get Notion free, Request a demo | Try Basecamp Free |
| Proof at the top | A customer logo section | Customer logos and company claims such as “100M users in over 50 countries” | “Thousands of people are working in Basecamp right now.” |
Four patterns show up across the three:
- Short headlines. They run from 6 words (Notion) to 10 words (Basecamp). Linear names a category, Basecamp lists three jobs, and Notion’s sub-headline does the explaining for a more abstract headline.
- Two doors for two buyers. Notion puts a free sign-up next to “Request a demo”. One serves the person who wants to try it alone, the other the buyer who wants a sales conversation.
- Proof near the top. All three show some proof before the first scroll or close to it. Numbers such as Notion’s user count are the company’s own claims, and a careful visitor reads them that way.
- A free entry point. Each page offers a free way in: “Get Notion free”, “Try Basecamp Free”, or a sign-up next to a free plan on Linear’s pricing page.
The pricing page
Visitors who like the homepage often open pricing next. Linear’s pricing page (as of October 2026) shows four plans: Free at $0, Basic at $10 per user per month billed yearly, Business at $16 per user per month billed yearly, and Enterprise with custom pricing behind “Contact sales”. The page lets a buyer do the arithmetic alone.
Example: a 12-person product team compares Linear’s two paid self-serve plans at list price.
- Basic: 12 users x $10 x 12 months = $1,440 a year.
- Business: 12 users x $16 x 12 months = $2,304 a year.
- Difference: $2,304 - $1,440 = $864 a year.
- Per person: $864 / 12 users = $72 a year, or $6 a month.
That last line is the question your own buyer asks: is the higher tier worth $6 a person a month? A pricing page answers it when it lists what the higher tier adds right next to the price. For per-seat and tiered structures in general, see SaaS pricing models.
Speed: the fold has to load first
A headline nobody sees does no work. Google’s Core Web Vitals set three limits for a good experience:
| Metric | What it measures | Good |
|---|---|---|
| Largest Contentful Paint (LCP) | Render time of the largest image, text block or video in view | 2.5 seconds or less |
| Interaction to Next Paint (INP) | How fast the page responds to a click or tap | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | How much the layout jumps while loading | 0.1 or less |
Google recommends measuring each one at “the 75th percentile of page loads”. On a SaaS homepage, the candidates are the hero headline block and any large image or video next to it, because web.dev’s LCP definition counts images, videos and block-level text.
Example: your homepage records 1,000 page loads in a month.
- If 180 loads have an LCP above 2.5 seconds, then 1,000 - 180 = 820 loads, or 82%, are at 2.5 seconds or less. More than 75% are within the limit, so the 75th-percentile load is too. The page passes.
- If 300 loads are slower, only 700, or 70%, are within the limit. The 75th-percentile load is slower than 2.5 seconds. The page fails, even though most visitors had a fast load.
A slow minority is enough to fail. That is why a heavy hero video or a late banner that pushes the headline down costs more than it seems.
Checklist
- The headline says what the product does, or the job it replaces, in 10 words or fewer.
- The sub-headline says who it is for or what changes for them.
- There is one primary CTA, plus a second one only for a different buyer (demo vs self-serve).
- Proof is checkable: named customers, or numbers with a date and a source.
- Pricing is one click from the top navigation.
- The hero image has a fixed width and height, so it cannot shift the layout.
- LCP is 2.5 seconds or less at the 75th percentile on mobile, from real-visitor data.
For more examples of the products behind these sites, see SaaS examples.
Common mistakes
- A mission statement instead of a headline. A line about changing how the world works tells a visitor nothing about the product. Why it happens: the headline is written for investors or the press rather than for buyers. Instead: name the job or the category, as Linear and Basecamp do.
- Five buttons above the fold. Every extra CTA competes with the one you want clicked. Why it happens: each team asks for its own button. Instead: keep one primary action and one alternative for a different buyer.
- Proof nobody can check. An unnamed “thousands of customers” convinces less than three named companies. Why it happens: logos need permission and numbers need upkeep. Instead: show what you can name and date, and keep it current.
- A heavy hero that fails LCP. An autoplay video or an unoptimized image can push the largest element past 2.5 seconds for a quarter of visitors. Why it happens: the page is reviewed on a fast office connection. Instead: check field data at the 75th percentile, and size the hero for mobile first.
Sources
- Homepages of Linear, Notion and Basecamp, read October 17, 2026.
- Linear, pricing, checked October 2026.
- web.dev, Web Vitals and Largest Contentful Paint, checked October 2026.
In three sentences
A good SaaS homepage puts a short headline that names the job, one line of detail, one or two calls to action and checkable proof above the fold. On October 17, 2026, Linear, Notion and Basecamp used headlines of 6 to 10 words, and each offered a free way in. None of it helps if the top of the page is slow, so keep LCP at 2.5 seconds or less for at least 75% of page loads.
