Hero library · oversized-type
Vertical headline
hero.type-vertical: 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 headline runs vertically up the left edge (columns 1–4) for the full hero height; the image fills 5–9; eyebrow sits top-right and subhead, CTA and meta sit bottom-right in 10–12.
- Slots
headline, heroImage, eyebrow, subhead, cta, meta- Grid
- headline
1-4 · image 5-9 · aside 10-12 - Notes
- The headline is set vertically (vertical: up = writing-mode: vertical-rl turned 180deg, reading bottom to top), not a rotated block that breaks layout. It is 1–3 words, uppercase, sized so it runs most of the hero height. At phone width it turns horizontal above the image.
Do
- Run the headline vertically (writing-mode: vertical-rl, rotated to read bottom-to-top) in columns 1–4, running most of the hero height.
- Fill columns 5–9 with the image at full hero height.
- Put the eyebrow at the top of 10–12 and subhead, CTA, rule and meta at the bottom of 10–12.
Don't
- Don't use more than three words in the vertical headline.
- Don't rotate any other text.
- Don't use the pattern for long, sentence-style headlines.
Phone width
- Turn the headline horizontal at step 6 above the image; image at 4:5; then subhead, CTA and meta.
- Never keep vertical text at 375 px.
Try this hero in the pickerllms.txt