--- title: "Hero section design: anatomy, variants and examples | Kombai" description: "A hero section opens a page with one headline, a short pitch and a call to action, so people know in seconds what the page offers." canonical_url: https://kombai.com/glossary/hero-section/ author: "The Kombai Team" --- # Hero section A hero section opens a page with one headline, a short pitch and a call to action, so people know in seconds what the page offers. - Also called: hero, above the fold - Platforms: Web, Mobile - In the Kombai gallery: [370 web designs](https://kombai.com/gallery/web/hero/), [39 mobile designs](https://kombai.com/gallery/mobile/hero/) - [Halcyon Voice](https://kombai.com/gallery/inspirations/hero-web-1/) (Web) - [Kiln](https://kombai.com/gallery/inspirations/hero-ios-36/) (Mobile) - [Tessera](https://kombai.com/gallery/inspirations/hero-web-366/) (Web) ## What is a hero section? A hero section is the first block of a page, right under the navigation. It says what the product or page is in one headline, backs it up with a line or two of copy and offers one main action, usually with a product shot, photo or illustration beside or behind it. Everything below it is detail. - The headline is the largest text on the page and usually its only h1. - One primary button leads, sometimes with a quieter second option beside it. ## When to use hero section - **Landing and home pages.** The first screen has to say what the product is and what to do next. - **Launches and campaigns.** A new product, a sale or an event that needs one clear message. - **Front doors to a section.** Careers, help and pricing pages that open with a short promise. ## When not to use one - **Task screens.** In an app, a dashboard or settings, people came to work. Show the work. - **Pages people scan.** Search results, docs and lists should open on the content, not a banner. - **No clear offer yet.** If you can't name the offer in one line, a bigger headline won't fix it. ## Anatomy 1. **Eyebrow**: Kicker or announcement pill 2. **Headline**: The one promise, as the h1 3. **Supporting copy**: One or two lines of detail 4. **Calls to action**: A primary and a quieter second 5. **Visual**: Product shot, photo or art 6. **States**: Centered, split, mobile, focus ## Variants We sorted every hero design in the Kombai gallery and found six patterns. ### 1. Centered stack The default. Eyebrow, headline, copy and buttons stacked in the middle, often with a row of customer logos underneath. - [Sentrel](https://kombai.com/gallery/inspirations/hero-web-358/) (Web) - [Bloom](https://kombai.com/gallery/inspirations/hero-ios-2/) (Mobile) - [Tracer](https://kombai.com/gallery/inspirations/hero-web-3/) (Web) ### 2. Split hero Copy on one side and a product shot or illustration on the other. On a phone it stacks, copy first. - [Alder](https://kombai.com/gallery/inspirations/hero-web-2/) (Web) - [Marlow](https://kombai.com/gallery/inspirations/hero-web-311/) (Web) - [Palisade](https://kombai.com/gallery/inspirations/hero-web-343/) (Web) ### 3. Headline over the product A centered headline above a wide screenshot of the app, so people see the product before they scroll. - [Kestrel](https://kombai.com/gallery/inspirations/hero-web-269/) (Web) - [Opus](https://kombai.com/gallery/inspirations/hero-web-7/) (Web) - [Orrery](https://kombai.com/gallery/inspirations/hero-web-287/) (Web) ### 4. Full-bleed image A photo or painting fills the section and the copy sits on top, often in a lower corner. - [Aurelia](https://kombai.com/gallery/inspirations/hero-web-368/) (Web) - [Celestia](https://kombai.com/gallery/inspirations/hero-ios-39/) (Mobile) - [Alpenglow](https://kombai.com/gallery/inspirations/hero-web-373/) (Web) ### 5. Input in the hero The main action is a field instead of a button: an email signup, a search box or a prompt to type into. - [Splendid](https://kombai.com/gallery/inspirations/hero-web-212/) (Web) - [Onyx](https://kombai.com/gallery/inspirations/hero-ios-1/) (Mobile) - [Hearthway](https://kombai.com/gallery/inspirations/hero-web-267/) (Web) ### 6. Type-led hero An oversized headline or wordmark carries the section with little else around it. Common for brands and studios. - [SmallRiot](https://kombai.com/gallery/inspirations/hero-web-57/) (Web) - [Golden Grove](https://kombai.com/gallery/inspirations/hero-ios-35/) (Mobile) - [Roam](https://kombai.com/gallery/inspirations/hero-web-6/) (Web) ## Where hero sections show up ### Launches and announcements A pill above the headline or a bar above the nav points to the newest release, feature or funding round. - [Braid](https://kombai.com/gallery/inspirations/hero-web-299/) (Web) - [Postora](https://kombai.com/gallery/inspirations/hero-web-356/) (Web) - [Halyard](https://kombai.com/gallery/inspirations/hero-web-323/) (Web) ### Storefronts and campaigns A seasonal collection or a sale takes over the hero, with a Shop button straight into it. - [Aldergate](https://kombai.com/gallery/inspirations/hero-web-233/) (Web) - [Tempest](https://kombai.com/gallery/inspirations/hero-ios-3/) (Mobile) - [Vireo](https://kombai.com/gallery/inspirations/hero-web-89/) (Web) ### Careers pages A short promise about the team, real team photos and one button to the open roles. - [Careers at Harlow](https://kombai.com/gallery/inspirations/hero-web-191/) (Web) - [Threadgate](https://kombai.com/gallery/inspirations/hero-ios-20/) (Mobile) - [Solvane](https://kombai.com/gallery/inspirations/hero-web-113/) (Web) ### Help centers A question as the headline, with a search field or a contact button as the action. - [Nordvane](https://kombai.com/gallery/inspirations/hero-web-338/) (Web) - [Draftsmith](https://kombai.com/gallery/inspirations/hero-ios-18/) (Mobile) - [Fernlink](https://kombai.com/gallery/inspirations/hero-web-252/) (Web) ## Hero section vs similar components | | [Hero section](https://kombai.com/glossary/hero-section/) | [CTA band](https://kombai.com/glossary/cta-band/) | [Feature section](https://kombai.com/glossary/feature-section/) | [Announcement banner](https://kombai.com/glossary/announcement-banner/) | |---|---|---|---|---| | Sits | At the top of the page | Near the end | Below the hero | In a thin strip at the very top | | Job | Says what the page offers | Asks for the action again | Explains what the product does | Points to one piece of news | | Best for | Landing pages and launches | Closing a long page | Benefits, screenshots and detail | Releases, sales and events | ## Build notes - Make the headline the page's one

. Headings below it start at

. - Set the headline in live text, never inside the image. - Text over a photo needs 4.5:1 contrast, or 3:1 for large text. Add a scrim. - Never lazy-load the hero image. Give it fetchpriority="high" instead. - Background video that plays on its own for more than five seconds needs a pause control. - Stack the copy above the visual on phones, with the main button on the first screen. ## FAQ ### What should a hero section include? A headline that says what the product or page is, one or two lines of supporting copy, one primary call to action and a visual that shows the product or sets the mood. An eyebrow, a second button and a row of customer logos are common extras. ### Should a hero have one call to action or two? One primary action, always. A second, quieter option works when there are two real paths, like Start free and Book a demo. Style the second as an outline button or a text link so the first one still leads. ### Is a hero section the same as above the fold? No. Above the fold is whatever shows before people scroll, and it changes with every screen size. A hero section is the block designed to fill that space. On a phone the fold often cuts through the hero, so put the headline and the main button first. ### Should a hero section be a carousel? Usually not. A rotating hero splits one first impression across several messages, and anyone who doesn't wait sees only the first slide. If it advances on its own, WCAG asks for a way to pause, stop or hide it. ## Related terms - [CTA band](https://kombai.com/glossary/cta-band/) - [Feature section](https://kombai.com/glossary/feature-section/) - [Navbar](https://kombai.com/glossary/navbar/) - [Logo cloud](https://kombai.com/glossary/logo-cloud/) ## References - [MDN: The HTML heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) - [WCAG 2.2: Understanding contrast (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) - [WCAG 2.2: Understanding pause, stop, hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - [web.dev: Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp)