Component

Hero

Full-width navy hero section with eyebrow, headline, subline, and CTA buttons.

With eyebrow and two CTAs

live editor — edit to update preview

<div className="overflow-hidden rounded-lg" style={{ marginTop: "-1.5rem" }}>
  <Hero
    eyebrow="Ann Design System"
    headline="Build consistent UIs faster"
    subline="Shared components across all Ann products."
    ctas={[
      { label: "Get started", href: "#", variant: "primary" },
      { label: "View source", href: "#", variant: "outline" },
    ]}
  />
</div>

Left-aligned

live editor — edit to update preview

<div className="overflow-hidden rounded-lg" style={{ marginTop: "-1.5rem" }}>
  <Hero
    headline="Open-source Flutter tools"
    subline="Flavoring, theming, and CI automation."
    ctas={[{ label: "Explore tools", href: "#" }]}
    align="left"
  />
</div>

Props

Prop	Type	Default	Description
headline*	string	—	Main heading.
eyebrow	string	—	Small uppercase label above the headline.
subline	string	—	Supporting paragraph below the headline.
ctas	HeroCta[]	—	Array of { label, href, variant? }. variant: "primary" \| "outline".
align	"center" \| "left"	"center"	Text alignment.
bleed	boolean	false	Extra bottom padding to bleed into the next section.