Hero

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

Shared

Defaults

Primary

Secondary

Source

import { Hero } from "@zudo-composer/ui";

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

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; } */