14 Hero Section Layouts (and When to Use Each)

The best hero section layout depends on what you have to show and what the visitor needs to understand in the first five seconds. A split layout is the safest default for products that need explaining, a full bleed photograph suits places and physical things, and a typographic hero suits brands with a strong voice and few strong images. Below are 14 layouts, from those dependable options to bolder compositions like sliced, interlocked and wordmark, with when each works and where each goes wrong.

Key takeaways

• Choose the layout from your assets. A layout that needs one extraordinary photograph fails with an ordinary one.
• The safe layouts (split, centered, full bleed) explain. The bold layouts (sliced, interlocked, wall, wordmark) make an impression and explain less, so the next section must do more work.
• Every hero needs one dominant element. If the headline and the picture are the same visual weight, neither leads.
• Design the phone version on purpose. Collage, editorial grid and sliced heroes in particular need their own mobile composition.
• Readability over pictures is a technique, not luck: a gradient, a band of ground or a solid card keeps text legible.

1. Split

What it is: the frame divided into two unequal parts, type on one side and a picture on the other. A 5:7 or 4:6 ratio usually feels more deliberate than a strict half.

When it works: products and services that need a sentence of explanation, a supporting line and a clear button. It is the most legible hero there is, and it adapts well to phones by stacking.

Watch out for: sameness. Because almost every software site uses it, give it character through type, cropping or color rather than accepting the default of headline left, screenshot right. Browse the hero sections in the library to see how much variety one simple structure can hold.

2. Full bleed photograph

What it is: one picture fills the whole frame edge to edge. The type sits on it, anchored to an edge or a corner, with a gradient, band or block of ground to keep it readable. The navigation floats over the picture.

When it works: hotels, restaurants, travel, architecture, physical products: anything where the picture is the argument.

Watch out for: contrast. Text over photography must still meet 4.5:1 for body copy and 3:1 for large headlines, and the busy part of a photo moves when the viewport changes. Test at several widths, and set an object-position so the subject is not cropped away on phones.

3. Typographic

What it is: the type is the picture. The headline is set enormous (often 120 to 200px on desktop), breaking across lines or cropped by the edges, with pictures small, few or absent.

When it works: agencies, studios, publications, and brands with a strong voice but no great photography. It also loads fast.

Watch out for: line breaks. A headline that breaks beautifully at 1440px can break into nonsense at 1280px. Control breaks with explicit spans, use clamp() for the size, and write the headline short enough to survive.

4. Editorial grid

What it is: a magazine spread on a strict multi-column grid. Three or more pictures at clearly different sizes, captions, numbers and rules between them, with the headline as one element of the grid rather than on top of it.

When it works: fashion, publishing, culture, portfolios with several strong pieces, and any brand that wants to feel curated.

Watch out for: the phone. A 12-column spread collapses into a long, repetitive stack. Decide which one or two pictures survive on mobile and hide or move the rest.

5. Collage

What it is: pictures cut out, layered, rotated and overlapping, with type woven between and across them. Deliberate disorder, like a pinned wall or a scrapbook page.

When it works: creative brands, events, youth culture, anything playful or rebellious where personality matters more than calm.

Watch out for: chaos without intent. Keep a grid underneath even if nothing sits square on it, limit rotation to a few degrees, and make sure the headline stays the clear first read.

6. Centered

What it is: a symmetric composition on the vertical axis. The headline and one framed picture stacked in the middle of generous ground, with the navigation and small details balanced on either side.

When it works: launches, single products, wellness and luxury brands. It feels formal and still.

Watch out for: long headlines. Centered text over three or more lines gets hard to read because every line starts in a different place. Keep it to two lines and the supporting text under about 60 characters per line.

7. Frame

What it is: the ground as a wide border around an inset picture, like a mat around a print or the cover of a book. The headline, navigation and details sit in the margins of the border, not on the picture.

When it works: galleries, photographers, books, hospitality, anywhere one image deserves to be presented rather than used as wallpaper.

Watch out for: the margin size. A border under about 24px reads as a mistake; one of 40 to 80px on desktop reads as intentional. On phones, a thinner border (16 to 24px) still keeps the effect.

8. Sliced

What it is: the key picture cut into five to nine tall vertical slats with narrow gaps of ground between them, a few shifted up or down like blinds caught half open, and one enormous letter or word set behind them, showing through the gaps. Everything else is small, at the edges.

When it works: fashion, music, architecture, studios: brands that want to be remembered for their first screen.

Watch out for: the picture losing its subject. Choose an image with a clear central figure and let at least one slat carry it whole. The giant letter must be decorative only; put the real headline in accessible text.

9. Interlocked

What it is: the headline broken into enormous syllables or words that lock around one picture of a single figure or object. Parts of the type sit above, beside and below it, at least one passes behind it, and the outer parts are cropped by the frame, so type and picture read as one shape.

When it works: portraits, sports, fashion, products with a strong silhouette.

Watch out for: cut-out quality. The effect depends on a clean mask around the figure. Plan the layering with z-index and a transparent PNG or WebP, and give the full headline to screen readers in plain text.

10. Stacked

What it is: the pictures as things you could pick up: a fanned pile of prints or cards, each turned a few degrees, overlapping with real shadows, gathered in one part of the frame. The headline sits large and calm beside the stack.

When it works: portfolios, photographers, archives, stationery and anything tactile or nostalgic.

Watch out for: overdoing it. Three to five prints at 2 to 8 degrees of rotation feels natural; ten prints at 20 degrees feels like a mess. Keep the ground around the stack clear.

11. Wall

What it is: a wall of pictures filling the frame edge to edge in a tight grid of different sizes with hairline gaps, and one solid card of the ground laid over its middle carrying the brand, headline, line and call to action. The card is the only quiet place on the screen.

When it works: marketplaces, image libraries, communities, catalogs: anywhere the sheer quantity of work is the point.

Watch out for: weight. Twenty images in a hero is heavy. Use small, compressed thumbnails, lazy-load anything below the card, and make sure the card's text passes contrast on its own ground.

12. Statement

What it is: top to bottom, never side by side. A full-width statement in three lines, left-aligned, set large but well below poster size, its phrases alternating between the text color and a pale tint of it, with small glyphs between some phrases. Below it, a row of three picture cards with rounded corners, then a row of two wider ones.

When it works: studios, agencies and product brands that want a confident voice and a showcase of work in one screen.

Watch out for: the pale tint. The lighter phrases still need to read; keep them at 3:1 against the ground at minimum. Let the navigation carry the single call to action.

13. Wordmark

What it is: a product poster. The brand name as an enormous wordmark along the bottom left, about two thirds of the frame wide. One picture of a single object fills the right side and is cropped by the edge. Top left, a small block of text in capitals. The middle stays empty.

When it works: consumer products, fashion labels, hardware, beverages: brands whose name is the message.

Watch out for: the explanation. A wordmark hero says who, not what. Put a clear description in the small text block and make the next section explain the offer. Our guide to landing page sections suggests what should follow.

14. Immersive

What it is: one photograph fills the frame with its subject near the center. The navigation is a floating pill, centered near the top on a translucent tint. The headline is centered in the lower third with one line and one call to action (or a field and a button) under it, over a gradient into the darkest color.

When it works: travel, outdoor gear, apps with a lifestyle angle, waitlists and launches.

Watch out for: the gradient. It must be strong enough at the bottom 30 to 40 percent of the frame for text to pass contrast, yet subtle enough not to look like a dark band. Test with your real photograph, not a placeholder.

How to choose

In short

Pick the hero layout from your assets and your goal, not from what is fashionable. Start with split, full bleed or typographic if the page must explain; reach for sliced, interlocked, wall or wordmark when the brand must be remembered and the next section can do the explaining. Then set the headline with a proper type scale, check contrast, and design the phone version on purpose. If you want ready-made starting points, the moodboards each include a hero design, and the blocks are reusable sections you can build on.