Hero library · collage
Asymmetric colour blocks
hero.asymmetric-blocks: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- The hero is cut into unequal colour blocks with no gaps: a big accent headline block (1–7, rows 1–2), a surface subhead block (8–12), a photo (8–10, rows 2–3), an accent2 CTA block (11–12), a surfaceAlt note (1–4) and an outlined caption block (5–7).
- Slots
eyebrow, headline, subhead, heroImage, cta, meta, caption- Grid
- headline
1-7 · subhead 8-12 · photo 8-10 · cta 11-12 · note 1-4 · caption 5-7 - Notes
- Like a Mondrian or a Bauhaus poster: blocks touch (gap 0) and differ in size and colour. Text on accent uses onAccent, on accent2 uses onAccent2.
Do
- Divide the hero into six touching blocks of different sizes; no gaps between them.
- Give the headline the largest block, in the accent colour with onAccent text.
- Use surface, surfaceAlt and accent2 for the other blocks and one photo block.
- Put the CTA as a link alone in the small accent2 block.
Don't
- Don't round the blocks' corners or add shadows.
- Don't make two blocks the same size and colour.
- Don't put text over the photo block.
Phone width
- Stack blocks in source order at full width: headline, subhead, photo (4:3), CTA, note, caption.
Try this hero in the pickerllms.txt