Hero section layouts: choosing a first screen for what you have

The first screen should answer two questions: what is this, and what can I do here? Which layout does that best depends on the material you actually have: a product someone can try, a strong photo, a short sharp message, a collection, or none of those. Choose the layout from that list rather than from a landing-page formula.

Start from your material

• A product that can be tried in the browser: put the working product near the top.
• A screenshot, photo, or illustration that explains the product: copy beside the visual.
• A clear message and no strong visual: let typography carry it.
• Many items of similar weight, such as templates or articles: show several previews.
• A dashboard, archive, or search page: a short heading and the content itself.

Copy beside a visual

A split layout works when an image or demo explains the product better than words. Keep the text short enough that both halves are visible together on a laptop screen. If the heading needs four lines at desktop width, the split is fighting the copy.

<section class="mx-auto grid max-w-6xl items-center gap-10 px-4 py-16
                lg:grid-cols-[1.1fr_1fr] lg:py-24">
  <div>
    <h1 class="max-w-[18ch] text-4xl font-semibold tracking-tight text-balance
               text-slate-900 sm:text-5xl">
      Invoices your clients can pay from the email
    </h1>
    <p class="mt-4 max-w-prose text-lg text-slate-700">
      Send an invoice, get paid by card or bank transfer, and see who has opened it.
    </p>
    <a href="/signup"
       class="mt-8 inline-flex min-h-11 items-center rounded-lg bg-slate-900 px-5
              font-medium text-white">
      Create an invoice
    </a>
  </div>
  <img src="/hero-invoice.png" alt="An invoice open in an email client with a Pay now button"
       width="1200" height="900" fetchpriority="high"
       class="w-full rounded-xl border border-slate-200" />
</section>

Below the lg breakpoint the grid becomes one column and the elements stack in source order: heading, text, button, then image. That is usually right, because the action stays near the top on a phone. If the image is essential to understanding the heading, move it up with order-first on the image and lg:order-none to restore the desktop order. Decide this deliberately; shrinking the desktop arrangement is not a mobile layout.

Load the hero image early

The hero image is often the page's Largest Contentful Paint element, the metric web.dev suggests keeping at 2.5 seconds or less. Three details help:

• Use an <img> element with width and height attributes, not a CSS background image. Background images in CSS are not found by the browser's preload scanner, so they start downloading later. If you must use one, preload it with <link rel="preload">.
• Add fetchpriority="high" to the one image most likely to be the LCP element. Setting it on many images cancels out the benefit.
• Never add loading="lazy" to the hero image. Lazy loading delays exactly the image you need first.

Lead with the product

If someone can understand the product by using it, put that interaction at the top. A color tool can open with a working generator; a code formatter with an input and output. Use the real controls and a representative starting state, and surround it with only the context needed to begin: one sentence on what it does, and where the output goes.

GradientDeck's home page works this way: the first screen is a preview where you switch between tools, such as gradients, glass, mesh, and patterns, shuffle a result, and copy its code.

• Pick a starting state that shows the product at its most typical, not its most dramatic.
• If the page is server-rendered, make the initial state deterministic. A random starting value generated on the server and again in the browser produces a hydration mismatch in React.
• Make sure the first screen still says what the product is before the interactive part has loaded.

Let typography carry it

When the message is the main asset, give a short heading room and set the hierarchy with size, weight, and line breaks. Fluid type keeps a large heading from overflowing on narrow screens:

.hero-title {
  /* about 37px at 320px wide, grows with the viewport, 72px from 1200px up */
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;   /* evens out line lengths in short headings */
  overflow-wrap: break-word;
}

The rem part of the middle value keeps the size responding to the user's font-size setting; a pure vw value would ignore it. max-width in ch keeps lines short regardless of font size. text-wrap: balance is intended for short blocks like headings; browsers that do not support it simply wrap normally. Test the heading with a long word, a translated version if you have one, and at 320 CSS pixels wide, the width WCAG's Reflow criterion uses.

Backgrounds behind the hero

A typographic or split hero often gets a gradient or mesh background. A CSS gradient has no network cost, since nothing is downloaded, which makes it a cheap way to give the first screen some color. Keep the area behind the heading the calmest part of the background: put the strongest color point in a corner, and check text contrast against the lightest and darkest colors under the text.

<section class="relative isolate overflow-hidden bg-slate-950">
  <div aria-hidden="true" class="absolute inset-0 -z-10
       bg-radial-[at_85%_10%] from-indigo-500/40 to-transparent to-60%"></div>
  <div class="mx-auto max-w-6xl px-4 py-24">
    <h1 class="max-w-[18ch] text-5xl font-semibold text-balance text-white">…</h1>
  </div>
</section>

Use a number only when it matters

A measured result can lead a page when it is verified and directly relevant: a benchmark for a database, a price for a commodity product. Include its context and source next to it. If you do not have that evidence, choose another structure; an invented or unsourced figure in the largest type on the page undermines everything below it.

Use several previews for a collection

A template gallery, a portfolio, or a journal can open with a few contrasting examples. Vary their size by importance rather than placing every item in an identical box, and show titles and links without requiring hover, since touch screens have no hover state.

Sometimes, skip the hero

For an archive, dashboard, documentation page, or search results, the content is the best introduction. A short heading, a search field or filter, and immediate access to the list is enough. A large decorative banner on these pages only pushes the useful part further down.

Height and the fold

Let the hero be as tall as its content plus comfortable padding. Forcing it to fill the screen with min-h-screen (100vh) has two problems: it hides any hint that there is more below, and on mobile browsers 100vh can be taller than the visible area while the address bar is shown. If you do need a full-height section, min-h-svh uses the small viewport height, which always fits.

Check the first action

• Use one clear starting action, labeled with what happens next (Create an invoice, not Get started).
• Keep navigation available without competing with the heading.
• Use actual product screens rather than a fake browser or device frame drawn in CSS.
• Check the keyboard order: the main action should be reachable soon after the navigation.
• Check the layout at 320px wide and at 200% zoom.