Callouts and Stats
The V2.1 MDX vocabulary lets a doc include data-dense components inline without breaking prose flow.
Callout
Drops a coloured aside next to the prose. Use it for context the reader needs but the main flow doesn't need to interrupt for.
Warnings draw the eye. Use sparingly — three warnings on one page and readers stop noticing.
Confirmations close a thread: "this is the way we decided to do it."
StatCard
Single numbers worth pulling out of body text:
P95 latency (ms)
42
▼ 18%
Bundled size (KB)
318
▼ 32%
ComparisonMatrix
Side-by-side trade-offs, often the spine of a decision doc:
| Option A | Option B | Option C | |
|---|---|---|---|
| Latency | fast | fast | slow |
| Cost | low | high | low |
| Lock-in | none | vendor | none |
Plain prose still works
Components are additive — paragraphs, lists, code fences, tables all behave normally:
function pickChrome(role: string, hasVault: boolean): "vault" | "deliverable" {
if (role === "client") return "deliverable";
if (hasVault) return "vault";
return "vault"; // safe default
}| Chrome | Use case | Layout |
|---|---|---|
| vault | internal docs | 3-col |
| deliverable | client-facing | centered |
| reader | universal toggle | paper |
Back to the Sample Vault landing.