Hero

Landing-page hero with eyebrow, display title, lede, actions, and an optional media panel.

Layout

Usage

import { Hero, Button } from "@zudo-sg/ui";

<Hero
  title="Ship faster"
  lede="A tight, dark-correct component set."
  actions={<Button>Get started</Button>}
/>

Basic

Plain (untinted)

With media panel

Source

<Hero
  eyebrow="zudo-sg"
  title="A tight component system that scales"
  lede="Coherent spacing rhythm, consistent type, dark-mode correct…"
  actions={
    <>
      <Button href="/start">Get started</Button>
      <Button variant="secondary" href="/docs">Read the docs</Button>
    </>
  }
/>

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