Typography

Full MDX general-element contract, demoed through the Prose* components rather than raw HTML.

Typography

Usage

import { ProseH2, ProseP, ProseA } from "@zudo-sg/ui/src/content/…";

<ProseH2>Section</ProseH2>
<ProseP>Body copy with an <ProseA href="#">inline link</ProseA>.</ProseP>

All elements

Headings (h2-h6 scale)

Text formatting

Lists (ul / ol / nested)

Table

Blockquote and definition list

Source

import { ProseH2, ProseP, ProseA } from "@zudo-sg/ui/src/content/…";

<ProseH2>Section</ProseH2>
<ProseP>Body copy with an <ProseA href="#">inline link</ProseA>.</ProseP>

Live CSS

Injected into the previews above. Typography

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