Headings

Page- and section-level heading blocks with optional eyebrow, description, and action.

Typography

Usage

import { PageHeading, SectionHeading } from "@zudo-sg/ui";

<PageHeading eyebrow="Guide" description="…">Getting started</PageHeading>
<SectionHeading description="…">Features</SectionHeading>

PageHeading

SectionHeading

SectionHeading with action

Source

<PageHeading
  eyebrow="Documentation"
  description="A coherent set of Preact components styled with tight design tokens — dark-mode correct out of the box."
>
  Build with zudo-sg
</PageHeading>

Live CSS

Injected into the previews above. Headings

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