ProseDl

MDX `dl`/`dt`/`dd` element overrides — a definition list with bold terms and muted descriptions.

Typography

Usage

import { ProseDl, ProseDt, ProseDd } from "@zudo-sg/ui/src/content/prose-dl/prose-dl";

<ProseDl>
  <ProseDt>hsp</ProseDt>
  <ProseDd>Horizontal spacing token axis.</ProseDd>
</ProseDl>

Default

Source

<ProseDl>
  <ProseDt>hsp</ProseDt>
  <ProseDd>Horizontal spacing token axis.</ProseDd>
  <ProseDt>vsp</ProseDt>
  <ProseDd>Vertical spacing token axis.</ProseDd>
</ProseDl>

Live CSS

Injected into the previews above. ProseDl

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