Hero library · oversized-type
Giant wordmark
hero.giant-wordmark: 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 site name runs edge to edge at the largest step, sitting on the bottom of the hero; a three-zone strip above it carries eyebrow (1–4), headline + subhead (5–9) and CTA (11–12).
- Slots
eyebrow, headline, subhead, cta, siteName- Grid
- eyebrow
1-4 · headline 5-9 · cta 11-12 · wordmark full - Notes
- Fit the wordmark to the container width (step 8, tight tracking, uppercase) with clamp() or a fit-text routine; long names shrink, never wrap mid-word. The headline is the page's h1 even though the wordmark is bigger.
Do
- Set the site name at the top of the type scale and size it to the container width (CSS `clamp()` or a fit-text routine), on one line.
- Anchor the wordmark to the bottom edge of the hero; the strip of eyebrow / headline + subhead / CTA sits at the top. The headline stays the h1.
- Let the wordmark touch the grid's outer margins; it is allowed to be the widest thing on the page.
- At phone width keep it on one or two lines by shrinking the step, never by hyphenating.
Don't
- Don't use it when the site name is longer than ~14 characters; choose another hero.
- Don't add an image behind the wordmark or a gradient on the letters (unless the style allows gradients).
- Don't centre the strip above it; the three zones keep their columns.
Try this hero in the pickerllms.txt