Hero library · editorial
Magazine cover
hero.editorial-cover: 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 masthead (site name at step 8, full width) over a dateline rule; the cover photo fills 4–12; cover lines (3–5 numbered teasers) run down 1–3; the headline overlaps the photo's lower-left on a page-colour field.
- Slots
siteName, meta, index, heroImage, headline, items[3..5], cta- Grid
- masthead
full · dateline full · image 4-12 · coverlines 1-3 · headline 1-8 - Notes
- Cover lines are short teasers with a number or kicker in the accent colour. The headline sits on a bg-coloured field where it crosses the photo (columns 4–8), like a cover line knocked out of the picture.
Do
- Set the masthead (site name) at step 8 across the full width, uppercase, tight.
- Run a dateline rule under it: issue / season left, date or number right.
- Fill columns 4–12 with a portrait-cropped cover photo.
- List 3–5 numbered cover lines down columns 1–3, hairlines between them.
- Overlap the headline onto the photo's lower-left corner on a solid bg-coloured field.
Don't
- Don't put the masthead over the photo.
- Don't write cover lines longer than eight words.
- Don't use a filled button; the CTA is an underlined link under the cover lines.
Phone width
- Masthead (fitted to width), dateline, photo at 4:5, headline, then cover lines.
- Remove the overlap; keep the dateline on one line.
Try this hero in the pickerllms.txt