Hero block
The opening band of a home page: a headline, an image and a call to action, in one of three visual treatments.
Hero Centered Text only, with the image faint behind it and a soft glow. Calm and confident.
Quiet confidence
No picture competing with the words — the photo whispers in the background and the message does the talking.
Read on Hero Split image Words on one side, a floating photograph on the other. Hover it.
Show it, don't just say it
A real photograph beside the headline gives people something to look at — and a reason to keep scrolling.
Next: full-bleed Hero Full bleed The photo fills the band and the headline sits on top. Add parallax and a typewriter for extra life.
Make a big entrance
Edge to edge, with a scrim so the words always stay readable whatever photo you choose.
See the other blocksWhat an editor can change
Every field below is something an editor can change on Hero. The editor builds its form from this list, so adding a field to a block never means building a screen for it.
Styles centeredsplit-imagefull-bleed
- Headline required Rich text
- Standfirst Text up to 220 characters
- Image Picture
- Call to action Group
- Link text required Text
- URL required Link
- Style Choice centered: text only, image faint in the background. split-image: text and image side by side. full-bleed: image fills the band, text overlaid. centered · split-image · full-bleed — default: centered
- Image overlay Choice How dark the layer over a full-bleed image is, to keep the white text readable. Raise it for a bright or busy picture. On a phone the layer is an even tint of the same strength instead of a fade, since the text sits over the middle of the picture there. Only the full-bleed style uses it. light · medium · strong — default: medium