Layout pattern · updated 3 Sept 2026
Hero section
A hero is the first screenful of a page, built to state what the site is and offer one action before the visitor scrolls. It carries the headline, a supporting line, a primary call to action and usually one image, demo or product shot, and it sets the type scale and colour roles the rest of the page inherits.
Think of it as
The shop window. Everything behind it matters, but the window decides whether anyone walks in, and it has about three seconds to do it.
Worked example
Our own homepage hero holds a three-verb headline, a one-sentence lead, and a URL field that hands off to the decoder. The decoder reads that page at 2,520 served words, one H1 and a self-referencing canonical; a hero that is an image with text baked in would have read as zero words.
Why it matters
The hero is where a type scale is set. Its display size is the top of the scale every other heading derives from, and its button is the first appearance of the primary colour. Get the hero tokens right and the page tends to follow; get them wrong and every section below inherits the error.
How it fails
Two primary buttons of equal weight, so the visitor has no first action. Text rendered inside the image, invisible to a crawler and to an agent. A display size chosen for impact that the body copy cannot stand next to.
What to measure open the decoder →
- The largest font size on the page and its ratio to the body size
- How many distinct button treatments appear above the fold
- Contrast of the headline against whatever sits behind it, especially over an image or gradient
- Whether the headline text exists in the served HTML or only in an image
Where you meet it
- Marketing home pages
- Product launch pages
- Portfolio landing pages
Showcase collections that exhibit it
Build it
Next rung
Once the hero is one action and one scale, the next question is what happens on scroll: does the navigation follow the visitor, and does the primary colour reappear where it should?