hero.split-offset-stack · Split, offset stack

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.split-offset-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Three blocks step down the grid and overlap: the image in 5–12 (rows 1–2), a solid headline panel in 1–7 that covers the image's lower-left corner (rows 2–3), and a ruled subhead + link in 9–12 (row 3).
Slots
heroImage, eyebrow, headline, subhead, cta
Grid areas
image 5-12 · headline 1-7 · aside 9-12 (12-column grid, 1-based inclusive spans)
Notes
Use explicit grid rows so the headline panel overlaps columns 5–7 of the image; the panel has the page background so the headline never sits on the photo. Later children paint above earlier ones.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)

Do

  • Place the image in columns 5–12 of rows 1–2 and the headline panel in columns 1–7 of rows 2–3, so they overlap by three columns.
  • Give the headline panel the page background colour (bg) and padding so the headline reads on a solid field.
  • Set the headline at display step 7, heavy weight, two or three lines.
  • Put the subhead and a text link in 9–12 below a top rule, aligned to the panel's baseline row.

Don't

  • Don't align the three blocks to one edge — the stair-step offset is the pattern.
  • Don't let the headline sit directly on the photo without the solid panel.
  • Don't add a filled button row; one arrow link is the action.

Phone width

  • Stack image (4:3), headline panel, then subhead + link; remove the overlap.
  • Drop the headline to step 6 so it fits in three lines at 375 px.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project