LineHero

Shared hero for business-line landing pages, reused across every line with per-line copy. Pair with a `[data-line]` ancestor so its accent color follows that line's theme.

Landing

Usage

import { LineHero } from "@zudo-sg/ui/src/landing/line-hero/line-hero";

<LineHero
  eyebrow="Vacuum Solutions — example-brand.com"
  heading="Vacuum equipment you can rely on"
  lead="Gauges, pumps, and integrated systems, backed by hands-on engineering support."
  actions={[{ label: "View lineup", href: "/lines/vacuum/products", variant: "primary" }]}
/>

Default

Minimal (no actions)

Source

import { LineHero } from "@zudo-sg/ui/src/landing/line-hero/line-hero";

<LineHero
  eyebrow="Vacuum Solutions — example-brand.com"
  heading="Vacuum equipment you can rely on"
  lead="Gauges, pumps, and integrated systems, backed by hands-on engineering support."
  actions={[{ label: "View lineup", href: "/lines/vacuum/products", variant: "primary" }]}
/>

Live CSS

Injected into the previews above. LineHero

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