Hero library · split
Split, diagonal seam
hero.split-diagonal: 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 surface-coloured copy panel in 1–6 meets the image (6–12) on a diagonal seam; the panel holds the headline, one CTA and a row of 2–3 stats.
- Slots
heroImage, eyebrow, headline, subhead, cta, stats[2..3]- Grid
- copy
1-6 · media 6-12 - Notes
- The copy panel's right edge is one straight diagonal (clip: diagonal-right = clip-path polygon(0 0, 100% 0, 84% 100%, 0 100%)), so the image shows through the wedge. At phone width the image comes first and the panel's top edge carries the diagonal instead.
Do
- Cut the copy panel's right edge on one straight diagonal (clip-path), leaning in towards the bottom: 16% of the panel's width at the bottom edge.
- Run the image under the seam from column 6 to the viewport edge, so it shows through the wedge.
- Set the headline uppercase at step 6, heavy, max two or three lines.
- Close the panel with a row of 2–3 stats (number over label).
Don't
- Don't use a soft curve or wave — the seam is one straight diagonal.
- Don't angle the text itself; only the panel edge is diagonal.
- Don't use more than one CTA.
Phone width
- Show the image first, then the panel; the panel's top edge carries the diagonal, so the image above it ends on a slant.
- Stats stay in one row if there are 2, stack if there are 3.
Try this hero in the pickerllms.txt