Hero

First-view hero band: eyebrow + display heading + lead + CTA row over a soft accent-tinted background.

Content

Usage

import { Hero } from "@zudo-sg/ui/src/shared/hero/hero";

<Hero
  eyebrow="Welcome"
  heading="Build things that last"
  lead="A sample lead paragraph."
  actions={[{ label: "Get started", href: "/docs", variant: "primary" }]}
/>

Primary (page hero)

Secondary (section hero)

Source

<Hero
  variant="primary"
  eyebrow="Sample Co."
  heading="Build things that last"
  lead="A demo company combining two imaginary product lines into one storefront."
  actions={[
    { label: "Browse products", href: "/products", variant: "primary" },
    { label: "About us", href: "/company", variant: "secondary" },
  ]}
/>

Live CSS

Injected into the previews above. Hero

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */