Hero library · oversized-type
Outline + fill type
hero.type-outline-fill: 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 display lines at step 6: the first solid across 1–12, the second outlined (stroke only) and indented to start at column 3; subhead + CTA sit under them in 1–4, meta bottom-right.
- Slots
headline, tagline, subhead, cta, meta- Grid
- solid
1-12 · outline 3-12 · copy 1-4 · meta 10-12 - Notes
- Outline line: outline: true = -webkit-text-stroke 2px in the heading colour with a transparent fill (solid fallback where text-stroke is unsupported). With motion allowed, fill the outline left-to-right on load (clip-path), once; never under prefers-reduced-motion.
Do
- Set two display lines at step 6: the first solid (the h1), the second outlined; keep each to two lines at 1440 px.
- Indent the outlined line to start at column 3 so the two lines interlock.
- Use a 2 px text stroke in the heading colour for the outline; the fill is transparent.
- Put subhead and one CTA under the type in columns 1–4.
Don't
- Don't outline body copy or anything smaller than step 6 — thin outlines fail legibility.
- Don't use the outline line as the only copy: the solid line carries the meaning (it is the h1).
- Don't add images, gradients on the letters or drop shadows.
Phone width
- Shrink both lines to step 6–7 and drop the indent; keep the stroke at 1.5 px.
- Subhead and CTA follow at full width; meta goes last.
Try this hero in the pickerllms.txt