Horizon
A two-column opening: headline, subcopy and calls to action beside a product window, with the text column given slightly more room.
Hero section templates
The hero is the first thing a visitor sees, and usually the only thing they read before deciding whether to keep scrolling. It carries one clear promise, one primary action, and — depending on the layout — a supporting image, product shot or piece of artwork.
15 hero section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Beacon
A centered opening with an announcement pill, headline, two calls to action and a social-proof row, above a wide dashboard mock.
Aura
An asymmetric showcase: copy and calls to action on the left, a clean app-window mock with a live metric card on the right.
Prism
A centered opening that sits inside its own artwork — five translucent glass panes fan out behind the headline and buttons.
Lattice
A restrained technical opening, left-aligned over a full-width mesh of connected nodes and edges.
Blueprint
A hero where the typography is the illustration, set over a faint drafting grid that fades toward the edges.
Marquee
Type as the image: a mono kicker above an oversized three-line headline set tight enough to read as one block.
Verse
A magazine opening spread with no imagery at all — composition and typographic hierarchy carry the whole section.
Canvas
The picture is the section: a full-bleed photograph fills the hero with the headline and buttons resting near the bottom.
Atrium
An asymmetric corporate split with the copy held to just over half the width and a photograph filling the remainder.
Eclipse
A photo band across the top with a content card pulled up to straddle its lower edge — half on the picture, half on the page.
Drift
A calm lifestyle opening: a narrow centered type block above a staggered trio of photographs at three different crops.
Cameo
A figure-led collage pairing copy on the left with an illustrated cut-out figure staged on the right.
Mural
Centered copy standing on a drawn horizon line that runs full width along the bottom edge.
Signal
A slim page header for utility pages: an eyebrow, one headline and a single line of subcopy, with no persuasive apparatus.
How to choose a hero section
The real question is what you have to show. If you have a strong product screenshot, a two-column or device layout earns its space. If you sell a service or an idea rather than a screen, a centered or typographic hero avoids the trap of filling the space with a stock photo that says nothing. Photo-led heroes suit places and people; typographic heroes suit brands with something to say.
At a glance
- Layouts
- 15 distinct hero sections
- Styles covered
- centered, photo, two-column, typographic, duotone, illustration, saas, technical
- With variants
- 1 of 15 offer more than one arrangement
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Hero section FAQ
What should a hero section contain?
A headline that states the promise in plain words, a sentence or two of supporting detail, and one primary action. A second, lower-commitment action is optional. Anything beyond that competes with the thing you actually want people to do.
Should a hero have an image?
Only if the image adds information. A product screenshot, a photograph of the real place, or an illustration that explains the idea all earn their place. A generic stock photo does not, and a typographic hero will almost always read as more confident than a decorative one.
How long should a hero headline be?
Short enough to read in one glance — typically three to eight words. If the headline needs a second line to make sense, the extra detail usually belongs in the supporting sentence underneath it.