Hero library · split
Split, offset stack
hero.split-offset-stack: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- 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
- image
5-12 · headline 1-7 · aside 9-12 - 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.
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.
Try this hero in the pickerllms.txt