hero.fullbleed-photo-caption · Full-bleed photo with caption

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.fullbleed-photo-caption". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A photograph spans the full viewport width at 21:9; under it, a caption row like a museum plate: headline 1–7, caption and CTA 9–12. No text on the image.
Slots
heroImage, headline, caption, cta
Grid areas
headline 1-7 · caption 9-12 (12-column grid, 1-based inclusive spans)
Notes
The image is edge to edge; the caption row returns to the normal content width and grid.
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Do

  • Run the photo across the full viewport width at 21:9 (4:5 at phone width), cropped with intent.
  • Bring the caption row back to the content width and the 12-column grid: headline 1–7, caption + CTA 9–12.
  • Write the caption like a plate caption: what, where, who — one or two short lines.

Don't

  • Don't put the headline or buttons on top of the photo, and don't darken it with an overlay.
  • Don't use a carousel; one photo only.
  • Don't shrink the photo into the content width — the bleed is the point.

We make complicated companies simple to choose

Corvid Robotics — identity

Start a project