--- title: "Hero section examples" description: "Hero section patterns that work, from product-first heroes to one-line promises, with real dev tool and SaaS homepages and the mistakes that cause bounces." source: https://savepad.app/blog/hero-section-examples --- [Blog](https://savepad.app/blog) · 23 April 2024 # Hero section examples Hero section patterns that work, from product-first heroes to one-line promises, with real dev tool and SaaS homepages and the mistakes that cause bounces. *A homepage hero saved as a collection with its screenshot, font, and colours* **TLDR** - The hero has one job: tell a stranger what this is and why they should care, in about five seconds. - The patterns that keep working: **show the product**, **one clear promise**, **one main button**, and **proof right underneath**. - The real examples below are from the Design Inspiration folder in my own Savepad, mostly dev tools and SaaS. ## Patterns that work **Show the actual product.** A real screenshot, a looping clip, or a live demo you can poke. Not an abstract 3D blob. [Linear](https://linear.app/) and [Raycast](https://raycast.com/) have been showing the product front and centre for years. **Say what it is.** “The Postgres platform” beats “Build the future of data”. Developers especially will close a tab that won’t tell them what the thing is. [Supabase](https://supabase.com/) and [Neon](https://neon.tech) are both blunt about it. **One main button.** Usually “Start free” or “Get started”, maybe a quieter second option like “Read the docs” or “Book a demo”. **Proof right under the fold line.** Logos, a stars count, a short quote. It answers “is anyone actually using this?” before they ask. **A code sample, for dev tools.** Three lines that show how easy it is. [Clerk](https://go.clerk.com), [Liveblocks](https://liveblocks.io/), and [Prisma](https://www.prisma.io/) do versions of this. ## From my swipe file My [Design Inspiration folder](https://my.savepad.app/@gunnyganatra/ronak-s-marketing-resources/developer-marketing/design-inspiration) has 34 homepages I’ve saved over the years: [Linear](https://linear.app/), [Raycast](https://raycast.com/), [Railway](https://railway.app/), [Retool](https://retool.com/), [Vercel](https://vercel.com/home), [Stripe](https://stripe.com), [Mintlify](https://mintlify.com/), [Bytebase](https://www.bytebase.com/), and more. Heroes change a lot, so what you see today might not be what I saved. Which is the reason to save them. *A mock hero with a big product screenshot for the fictional dev tool Tidepool* 0341 · product first · Tidepool *A mock hero with a short promise for the fictional coffee brand Northbrew* 0438 · one promise · Northbrew *A short code sample used in a dev tool hero* 0535 · code in the hero · ts Three hero patterns from a swipe file: product first, one blunt promise, and a code sample. ## Mistakes that make people bounce - **A headline that could be anyone’s.** “Work smarter, together.” Every second homepage. (Says the person whose homepage says “For all the things that make you go hmmmmm”. Fair.) - **A carousel.** Nobody waits for slide two. - **Three buttons fighting.** Start free, Book a demo, Watch video, Contact sales. - **Stock photos of people pointing at laptops.** You know the ones. ## Save the whole hero A hero is more than a screenshot: the headline, the font, the colours, the button. In Savepad (mine), a saved homepage keeps a full-page snapshot plus its palette and fonts, and you can bundle the screenshot, colours, and font as one collection. Then the [find a website’s colour palette](https://savepad.app/blog/find-website-colors) and [find a website’s font](https://savepad.app/blog/find-website-font) steps are done for you. More pages to steal from in [landing page examples](https://savepad.app/blog/landing-page-examples), and buttons in [call to action examples](https://savepad.app/blog/call-to-action-examples). ## FAQ ### What should a hero section include? A headline that says what it is or what it does for you, one line of support, one main call to action, and a visual of the actual product. Social proof right under it helps. ### Should a hero have a video or a screenshot? Whatever shows the product fastest. A short looping clip of the product in use beats a long video with a play button that most people never press. ### How long should a hero headline be? Short enough to read in a glance, usually under ten words. If it needs a comma and a second clause, the supporting line should probably carry that. [Join the waitlist](https://savepad.app/#waitlist) ## Read these next - [Landing page examples I keep stealing from: The landing pages in my own swipe file, what each one does well, and the patterns worth borrowing for your next homepage.](https://savepad.app/blog/landing-page-examples) - [Call to action examples: Call to action examples for buttons, pages, emails, and ads, grouped by the job they do, with the copy that works and the copy that gets scrolled past.](https://savepad.app/blog/call-to-action-examples) - [How to use Pinterest secret boards as a swipe file: How to make a secret board on Pinterest, use sections to sort a swipe file, cut down the AI pins in your feed, and know when Pinterest stops being the right place.](https://savepad.app/blog/pinterest-secret-board-swipe-file)