Hero library · oversized-type
Justified type stack
hero.type-stack-justified: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- Two bands of type between 2 px rules, each fitted to the full measure: the site name heavy at step 8, then the headline light at step 5 (one or two lines); a strip above (eyebrow, meta) and a strip below (subhead 1–5, CTA 10–12).
- Slots
eyebrow, meta, siteName, headline, subhead, cta- Grid
- eyebrow
1-3 · meta 10-12 · lines full · subhead 1-5 · cta 10-12 - Notes
- Fit the site-name band to the container width (fit-text or clamp()), so it runs flush on both edges like a justified poster; the headline band is set light and uppercase, at most two lines.
Do
- Fit the site-name band to the measure so it runs flush from the left to the right edge.
- Contrast the bands by weight: the site name at step 8 in the heaviest weight the heading font ships, the headline at step 5 in its lightest (300 where it exists), uppercase.
- Separate every band with a 2 px full-width rule.
- Keep the bottom strip to subhead (1–5) and one CTA (10–12).
Don't
- Don't letter-space to fill the width — scale the size instead.
- Don't let the site name wrap, or the headline run past two lines.
- Don't add an image to this hero.
Phone width
- Keep the site name fitted to the 343 px measure (smaller, not wrapped); the headline may wrap to three lines.
- Stack the bottom strip: subhead, then a full-width CTA.
Try this hero in the pickerllms.txt