Blueprint 02
A hero is not a banner. It is a fixed sequence of six possible elements, arranged in one of four layouts, with a defined collapse order for small screens. Get the sequence right and the copy can change weekly without the layout breaking.
Every hero is assembled from the same parts: an eyebrow, a headline, a lede paragraph, an action row, a proof strip and a media slot. Not all six are required — most heroes use four — but the order should not change, because visitors scan top to bottom and the sequence carries the argument. Eyebrow tells them where they are, headline tells them what this is, lede qualifies it, actions offer the next step, proof reduces the risk, media illustrates.
Constrain each part. The eyebrow is one line, uppercase or tinted, never wrapping onto three lines on mobile. The headline sits between four and twelve words and uses a fluid size with a hard ceiling so it does not become absurd on a 27-inch display. The lede caps at roughly 40 words and around 60 characters per line. The action row holds one primary button and at most one secondary link. The proof strip holds three short statistics, logos or a single sentence — never a paragraph.
| Layout | Structure | Strength | Weakness |
|---|---|---|---|
| Split | Copy column plus media column, 1fr/1fr or 3fr/2fr | Copy and image both get real estate; easy to make responsive | Media must be strong or the right half looks empty |
| Stacked centred | Everything centred in a single column, media below | Fast to build, works with no media at all | Centred lede text is harder to read past two lines |
| Full-bleed media | Image or gradient behind, copy panel over it | High visual impact | Contrast is fragile; needs an overlay and a tested fallback |
| Asymmetric editorial | Copy in columns 1–7 of a 12-column grid, media bleeding off the right edge | Looks considered, avoids the template feel | Needs careful handling at tablet or it collapses awkwardly |
Ask what the hero has to do. If the product is visual, the media is the argument and a split or full-bleed layout earns its space. If the product is abstract — a tool, a service, an API — the media slot is usually decoration, and a stacked hero with a diagram or a structural wireframe beats a stock photograph. If the page is a category or article index rather than a landing page, drop the hero to a compact page head: eyebrow, headline, one paragraph, no media, roughly 200px tall. Reserving the tall treatment for pages that genuinely sell something is what makes it work when you use it.
Do not set height: 100vh. It ignores content length, it fights mobile browser chrome, and it guarantees that on a short laptop screen the visitor sees a headline and nothing else. Set generous vertical padding instead — 64px to 96px top and bottom on desktop, 40px to 64px on mobile — and let content define the height. If you want a hint that there is more below, ensure the next section's top edge is visible rather than adding a scroll arrow.
Put the media after the copy in source order and use grid placement to move it visually on wide screens. That way the mobile reading order is correct for free, and screen reader users hear the headline before the image description.
A CTA band is a full-width section whose only job is to restate one action. It has at most four parts: a short heading, one supporting sentence, one button, and optionally a reassurance line such as availability or response time. Two buttons of equal weight in a CTA band is the most common structural error on marketing pages — if you truly have two audiences, split the band into two halves with a visible divider and give each half its own heading.
Placement follows the page length. On a short page, one CTA at the end is enough. On a long page, place one after the main proof section — roughly 60% of the way down — and one immediately before the footer. Resist the urge to repeat the CTA every two sections; frequency does not increase intent, it just makes the page feel like a pamphlet.
Structure A
Heading and copy left, button right, contained within the normal page width. Compact, sits comfortably between two content sections, and stacks to a single centred column below 768px with 24px between the copy block and the button.
Structure B
Edge-to-edge contrasting background, centred stack, 64px of vertical padding, sitting directly above the footer. Reads as the end of the page. Always set an explicit text colour in the same rule as the background so contrast holds in every state.
Read only the eyebrow, the headline and the button label of your hero. If those three strings do not tell a stranger what the page is and what they can do next, the structure is fine but the content is not carrying it. Fix the copy before you add another element — adding a fifth item to a hero almost never rescues a weak headline.