889 published examples
Explore hero designs for your website type.
A photograph or film still fills the viewport. The headline sits on top, often large and left or centered, with a thin supporting line and one action. Navigation stays quiet so the picture can set place and mood. This works when the image already contains the offer; it fails when the crop fights the type.
The headline is the composition. Cream or pale fields, a wordmark used at poster scale, or a claim stacked down the page. Photography, if it appears, sits below the type or as a mark. These heroes trade atmosphere for a sentence you can quote.
Commerce heroes put the season, the SKU, or the wearer in the frame. Copy is short: a collection name, a benefit, Shop Now or Download. Split crops and floating product cards keep merchandising close to the emotion of the photo without turning the section into a grid.
I tend to review a hero by covering the paragraph and asking whether the headline still names a specific offer. If it could sit on any site in the category, the picture is doing unpaid work. Overlay type on a busy crop is the first thing that breaks: faces, foliage, and machinery all compete with letterforms, especially once the image is recropped for a laptop height. Full-bleed motion looks confident until it postpones the claim. Type-only layouts age better when the sentence is concrete; they go hollow when the line is a mood. Two primary buttons usually mean the team could not pick a job for the section. Navigation on the image needs a contrast plan for both light and dark areas of the photo, not just the desktop comp. A useful test is the first 700 pixels of height: if the action or the product face has already fallen away, you designed a poster.
Not always. Campaign and product pages usually need one obvious action because the visitor arrived to buy or apply. Brand and studio worlds can end on a caption or a scroll cue if the next section is the real work. What fails is a decorative button that restates the headline, or two equal buttons that split the decision. If you cannot name the job of the click, drop the control and let the following section earn the action.
Most of these sections treat nav as part of the first screen, not a separate chrome. That means logo, links, and the headline share one contrast problem. A dark bar solves it cheaply and can flatten a cinematic crop. Transparent nav looks better when the top of the image is calm and the logo has a locked color. I look at the logo against the lightest and darkest strip in the photo, not the average.
When the sentence is more specific than any stock scene you could license. A sharp claim, a named person, or a product category that photographs poorly all benefit from type first. Photography still belongs nearby, just not as wallpaper. The layout fails when the line is generic and the empty field reads as unfinished. If you need a photo to explain the words, you needed the photo in the hero.
Plan the opening of your page with navigation, a clear message and a next step.
