Hero sections templates

3 templates

The hero is the only part of a page most visitors will read. These keep the headline as real text rather than an image, load fast, and stay legible when the words are longer than the placeholder.

The only part of the page most people read

A hero has one job: say what this is, for whom, and what to do next. Everything else on the page is for the minority who are still reading after it.

Keep the headline as real text. Setting it as an image costs you the search snippet, the ability to select and translate it, and any chance of it reflowing on a narrow screen. It is still surprisingly common.

Scale the type with clamp(), not with vw alone. clamp(2rem, 1.1rem + 3.4vw, 3.4rem) keeps a rem component in the middle term, so text still responds to a reader's browser font-size setting. A pure vw value ignores that setting completely, which is an accessibility failure almost nobody tests for.

One primary action. Two equally weighted buttons make people choose before they know enough, and the common result is that they choose neither. Make the secondary one quiet.

Test it with your real words

Hero layouts look fine with placeholder copy and fall apart with the actual headline, which is usually longer. Paste in the real thing and check it at 380 pixels, at 768, and at whatever your widest breakpoint is before you commit to a layout.

text-wrap: balance is worth adding to the headline — it evens out the line lengths so you do not get five words on the first line and one on the second. Use text-wrap: pretty on the paragraph underneath instead; balance is capped at a few lines and is expensive on long text.

If the hero has a background gradient, check the headline's contrast at the lightest point and the darkest, not just the middle. Automated checkers sample one pixel and will happily pass a combination that fails in one corner. The gradient generator will build the background for you.

Other categories