Hero library · collage
Scattered collage
hero.collage-scattered: 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 photos of different crops are scattered on offset grid rows (4:5 in 1–4, 1:1 in 9–12, 3:4 in 7–9); a slightly rotated display headline crosses them in 2–11; subhead + CTA in 1–5 and a rotated caption in 10–12 close it.
- Slots
gallery1, gallery2, headline, gallery3, subhead, cta, caption- Grid
- photo1
1-4 · photo2 9-12 · headline 2-11 · photo3 7-9 · copy 1-5 · caption 10-12 - Notes
- Place items with explicit rows so they overlap; later items paint on top. Where the headline crosses a photo, give the words an inline background highlight in bg so they stay AA. Each photo gets its own small rotation (−3° to 4°) in the real build.
Do
- Scatter three photos with different aspect ratios and treatments on offset rows and columns.
- Run the headline across 2–11, rotated about −2°, painting over the photos.
- Highlight the headline words with an inline bg-coloured background where they cross photos.
- Rotate each photo by a small, different angle (−3° to 4°).
Don't
- Don't align the photos to a common top edge or size.
- Don't use more than three photos in the hero.
- Don't let the headline lose contrast on a photo.
Phone width
- Show one photo (the first) at 4:5, then the headline unrotated, subhead and CTA; hide the other two photos.
Try this hero in the pickerllms.txt