amezquita design systemGet started

Patterns

Hero

Page-level section header with eyebrow, title, lead text, and an action slot

Markdown version for agents

Import
import { Hero } from '@amezquita/design-system/components/patterns/Hero'

Live render

Design system

Start from base

A brand-neutral theme every project starts from.

    Props

    PropTypeDescription
    eyebrow?string
    titlestring
    titleAs?'h1' | 'h2'
    lead?string
    actions?React.ReactNode
    align?'left' | 'centered'

    Tokens

    TokenTypeValue
    --hero-eyebrow-sizedimension14px
    --hero-eyebrow-spacingdimension0.01em
    --hero-eyebrow-weightfontWeight600
    --hero-lead-max-widthdimension60ch
    --hero-lead-sizedimension20px
    --hero-max-widthdimension800px
    --hero-padding-ydimension96px
    --hero-title-weightfontWeight800

    Usage example

    tsx
    <Hero {...args} />

    Accessibility

    • <section> wrapper — apply a meaningful aria-label at the page level when needed
    • titleAs controls heading level; always set it correctly for document outline
    • Actions slot: interactive elements inside must carry their own accessible labels