Hero library · full-bleed
Full-bleed, bottom plate
hero.fullbleed-overlay-bottom: 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 photograph fills the whole viewport; a solid page-colour plate sits on its bottom-left (columns 1–7) holding eyebrow, headline, subhead and one CTA; a small caption plate sits bottom-right in 10–12.
- Slots
heroImage, eyebrow, headline, subhead, cta, caption- Grid
- image
full · plate 1-7 · caption 10-12 - Notes
- The plate is opaque (bg role), so text never depends on the photo for contrast. For frosted-glass the plate may use backdrop-filter, but keep a solid fallback that passes AA.
Do
- Fill the full viewport (100svh) with one photograph, object-fit: cover.
- Anchor an opaque plate in the bottom-left (columns 1–7), flush with the bottom edge of the hero.
- Keep everything readable on the plate: eyebrow, headline at step 5 (three lines max, so the photo stays the larger area), a 1–2 line subhead, one CTA.
- Add a small caption plate bottom-right (10–12) crediting the place or product in the photo.
Don't
- Don't put text directly on the photo or rely on a dark gradient scrim for contrast.
- Don't centre the plate or float it mid-image.
- Don't use a carousel or autoplaying slideshow.
Phone width
- Show the photo at 4:5, then the plate below it at full width (no overlap).
- Hide nothing: the caption follows the plate as a muted line.
Try this hero in the pickerllms.txt