Hero sections in 2026, by the numbers
We counted every hero section in our index of hand-picked websites: how many are dark, how many move, how loud the type gets, what the picture shows and how tall they run.
The short answer
Of the 286 hero sections in our index, from 280 sites picked for how they look, 48% are light and 25% are dark; of footers, 35% are dark. 35% of heroes move on the live page, against 25% of the sections below them. 17% set oversized type and 15% a serif display face, against 7% and 7% of the sections below. 31% show a photograph, 21% a product screen, and 68% fit in one screen.
Every month we count one kind of section across the 
regards index. This month it’s the hero, the first thing a page
shows and the part of a site that gets the most care: 286 of them, from 280 sites.
The sites are picked one at a time, for how they look: studios, portfolios, shops, magazines and product sites. Every section is read for its kind and its look, and our capture records whether it moves on the live page. So these are shares of a library chosen for its design, not of the web at large. They say what well-made sites do, which is not what most sites do.
How many hero sections are dark?
About a quarter. Of the 286 heroes in our index, 25% read as dark and 48% as light; the rest sit on colour, photographs or mid-tones. Dark gets more common the further down the page you go: 28% of the sections between hero and footer are dark, and 35% of footers.
| Heroes | 25%72 of 286 |
|---|---|
| Sections in between | 28%577 of 2,091 |
| Footers | 35%85 of 241 |
Page by page it’s the same. Of the 202 pages that have both a hero and a footer, 37 open on a hero that isn’t dark and close on a dark footer, and 9 go the other way. Signing off in the dark is a common last move; starting dark and ending in white is a rare one.
The headline in deep violet on a pale lilac band, the dates set small to the right.
The same line at the foot of the same page, reversed out of violet, over a ribbon of colour.
Dark from the first screen: a glass pavilion lit up at night, the headline in white.
How many hero sections move?
About a third: 35% of heroes were seen moving on the live page, beyond a fade-in as you scroll. Films, scenes that play, words and pictures that change by themselves. Of the sections under them, 25% move, and among the kinds we hold most of, features and community sections move more often than heroes. Footer and CTA sections move least, at 11% and 10%.
| Features | 41%89 of 219 |
|---|---|
| Community | 39%23 of 59 |
| Hero | 35%101 of 286 |
| Work gallery | 29%239 of 821 |
| Feature detail | 28%35 of 126 |
| Testimonials | 28%18 of 65 |
| Logos | 25%15 of 61 |
| About | 22%21 of 97 |
| Blog | 11%12 of 111 |
| Footer | 11%26 of 241 |
| CTA | 10%14 of 135 |
A film fills the window and the studio’s name runs along its foot. The home page is this one screen.
Event posters scattered around a centred headline, its last two words in a warm gradient.
A magenta glow behind white type, one word of it in an italic serif.
What do hero sections do that the rest of the page doesn’t?
They get loud. Set each hero against the sections under it and the type is where it shows first: oversized type turns up in 17% of heroes and 7% of the rest, serif display type in 15% against 7%. The looks that take a chance, experimental, playful, retro and skeuomorphic, are 3 to 4 times as common at the top of a page as further down.
Grids go the other way. A Swiss grid holds 7% of heroes and 15% of the rest, a grid you can see 3% against 6%. A hero is mostly one big thing; the structure arrives with the content.
| Oversized type | Heroes:17%49 of 286 Every other section:7%169 of 2,332 |
|---|---|
| Serif display type | Heroes:15%44 of 286 Every other section:7%170 of 2,332 |
| Experimental | Heroes:10%28 of 286 Every other section:3%76 of 2,332 |
| Playful | Heroes:7%21 of 286 Every other section:2%51 of 2,332 |
| Retro | Heroes:7%19 of 286 Every other section:2%55 of 2,332 |
| Skeuomorphic | Heroes:5%13 of 286 Every other section:1%26 of 2,332 |
| Swiss grid | Heroes:7%20 of 286 Every other section:15%351 of 2,332 |
| A grid you can see | Heroes:3%10 of 286 Every other section:6%143 of 2,332 |
Four lines of white capitals fill the screen; the one line under them is set at reading size.
One serif line on near-black, and a row of awards set smaller still beneath it.
The home page is a desktop from the nineties: icons on a starfield, and a pop-up offering a free email subscription.
What do hero sections show?
Photographs, most often, in 31% of heroes; then product screens (21%), 3D renders (8%), illustration (5%) and abstract graphics (4%). A hero can carry more than one, and some carry none at all and leave it to the type.
| Photographs | 31%88 of 286 |
|---|---|
| Product screens | 21%61 of 286 |
| 3D renders | 8%23 of 286 |
| Illustration | 5%13 of 286 |
| Abstract graphics | 4%11 of 286 |
A still from a film, two men loading the truck, with the headline kept small in the sky.
The app’s own window beside a big serif headline, a video call tucked into its corner.
A rendered keyboard leans in from the top edge, its orange keys bright against black.
How tall is a hero section?
About two thirds fit in one screen. In a 1440 by 900 window, 68% of heroes are a screen tall or less, and 24% take half of it or less: a line or two, then the content straight underneath. 21 are exactly one screen tall, set to the height of the window, and 31 heroes are the whole home page, with nothing under them to scroll to.
| Half a screen or less | 24%68 of 286 |
|---|---|
| More than half, less than one | 37%105 of 286 |
| One screen exactly | 7%21 of 286 |
| Longer than a screen | 32%92 of 286 |
A quarter of a screen: a street photograph behind one long address set in oversized type.
Exactly one screen, and the whole site: cloth-bound books laid out on black.
Three screens of scrolling, as the lace film shrinks into a frame and the words grow around it.
How we counted
- The index. 2,618 sections from 361 websites, as regards held
them on 19 October 2026. Every site is picked by hand for how it looks; a site taken off the index isn’t counted.
- Kinds and looks. Every section is read for its kind (hero, features, footer and two dozen more) and for the looks it carries, from dark or light to oversized type and 3D renders. A section can carry several looks, so the shares in a chart don’t add up to 100%.
- Motion. Our capture records what moves on the live page. A section counts as moving when it was seen moving, beyond a fade-in as you scroll.
- Height. Measured in the window we capture pages in, 1440 by 900 pixels. Within 1% of 900 counts as exactly one screen.
- Shares of our index, not the web. A site gets in for how it looks, so this is what well-made sites do. The numbers are read again each time this page is published, so they move a little as sites are added.
Find heroes like these
Every hero counted here is on regards. Browse hero section examples picked by hand, or
the dark ones; see whole sites by style, from dark and minimalist to black and white. Or search every section by look, the way you’d describe it: “oversized serif on near-black”, “a
film behind the headline”, “not dark”. The free plan searches the whole library, 10 searches a
day; the rest is on the pricing page.
Next month we count another kind of section.
FAQ
What share of hero sections are dark?
In our index, 25% of the 286 hero sections read as dark and 48% as light; the rest sit on colour, photographs or mid-tones. Of footers, 35% are dark.
Do hero sections still move?
35% of the heroes in our index were seen moving on the live page, beyond a fade-in as you scroll: films, scenes that play, words and pictures that change by themselves. Of the sections below them, 25% move.
How tall is a hero section?
In our index, 68% of heroes fit in one screen of a 1440 by 900 window, and 24% take half of it or less. 31 of them are the whole home page, with nothing under them.
Where do these numbers come from?
From regards: 2,618 sections from 361 websites, each site picked by hand for how it looks, and each section read for its kind and its look. They are shares of that index, counted on 19 October 2026, not of the web at large.