pattern8 tokens6 stories
Hero
Page-level section header with eyebrow, title, lead text, and an action slot
Stories
Tokens
Design decisions specific to Hero — the values that control its appearance across all theme axes.
TokenTypeReferenceValueUsed by
--hero-padding-ydimension
{space.12}96px
Hero
--hero-eyebrow-sizedimension
{font-size.sm}14px
Hero
--hero-eyebrow-weightfontWeight
{font-weight.semibold}600
Hero
--hero-eyebrow-spacingdimension
0.01em0.01em
Hero
--hero-title-weightfontWeight
{font-weight.extrabold}800
Hero
--hero-lead-sizedimension
{font-size.emphasis}20px
Hero
--hero-max-widthdimension
800px800px
Hero
--hero-lead-max-widthdimension
60ch60ch
Hero