Hero library · collage
Cut-out over shapes
hero.collage-cutout: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- A cut-out photo (person or product on a transparent background) stands in 6–11 in front of a large accent circle; a tilted accent2 bar sits at its foot; a huge uppercase headline crosses in front of its left edge in 1–8; subhead + CTA bottom-left.
- Slots
heroImage, eyebrow, headline, subhead, cta- Grid
- shape
6-11 · cutout 6-11 · headline 1-8 · copy 1-4 - Notes
- Use a real cut-out (PNG/WebP with alpha or a CSS mask), not a rectangle photo. Layer order: circle, cut-out, bar, headline on top.
Do
- Stand a cut-out subject in 6–11 in front of a big accent circle.
- Add one tilted accent2 bar at the subject's foot for depth.
- Run an uppercase headline at step 8 in 1–8 so it crosses in front of the cut-out's left edge.
Don't
- Don't use a rectangular photo — the cut-out silhouette is the point.
- Don't add more than two shapes.
- Don't put the subhead over the shapes.
Phone width
- Cut-out first on a smaller circle (or none), then headline at step 6, subhead and CTA; hide the bar.
Try this hero in the pickerllms.txt