Heroes & headers
The top-of-page blocks. Each example below is the actual block, and its copy explains what it is. Scroll through the variants.
A hero with no media
The Hero block has a heading, intro and a button. With media set to "none" it's a clean, text-only opener.
A hero with a side image
Set media to "Image" and the picture sits beside the text. (This one uses a placeholder SVG.)
A hero with a highlights panel
The "Highlights" media shows a few key points beside the heading — an icon, a title and a line each. Fully editable.
- Fast to launchScaffold, edit, ship.
- Safe to editThe design can't break.
- VersionedUpdates via a bump.
A hero with an animated motif
The "Motif" media is a decorative, theme-tinted block animation — no image, no content, just brand-coloured motion. It freezes under reduced-motion.
Height, surface and text position
This hero uses the gradient surface, tall (full-viewport) height, and bottom-aligned text — three options that turn an ordinary hero into a dramatic opener.
A cover with an animated background
No image, no video — an inline SVG of blocks rising on a loop, tinted to your brand. A few kilobytes, crisp at any size, and it freezes under reduced-motion.
A cover with a looping video
A muted, looping background video (a seamless 6s VP9 loop, ~76 KB). The poster shows until it plays and under reduced-motion. Text is bottom-left here.
A tall cover with a photo
A background image with a strong darkening overlay so the text stays readable, at full viewport height.
Page header (light)
A compact title band — eyebrow, H1, intro and an optional button. It's what opens most of the pages on this site.
Page header (dark band)
The same block on a dark band, for a stronger section break.