Prose
Free-form, already-sanitized rich-text Block. Formalizes the legacy .rich-content pattern.
Prose is the free-form CMS-HTML Block-layer unit. It formalizes brikdesigns' .rich-content pattern: renders already-sanitized HTML and owns the vertical rhythm between its rendered elements. A heading directly followed by a paragraph gets the medium gap; two consecutive paragraphs get the wide gap. See ADR-023.
Prose does not sanitize. Pass html that the caller already sanitized — never raw user or CMS input. brikdesigns' RichContentBlock sanitizes server-side at ISR time before handing markup to .rich-content; consume the same pattern before passing html to Prose.
Prose
Use when: Open-ended, already-sanitized rich text (CMS HTML) — event descriptions, long-form copy with no fixed shape.
Don't: The content has a known title / subtitle / description / actions shape — that's ContentBlock.
<Prose html={sanitized} />ContentBlock
Use when: Named content with fixed, independently-omittable slots that own their own rhythm.
Don't: Free-flowing paragraphs of rich text with no slot shape — that's Prose.
<ContentBlock title="…" description="…" />Use it for
- CMS-authored rich text with no fixed slot shape (event descriptions, long-form marketing copy)
- Migrating brikdesigns'
.rich-contentblocks to a shared, versioned component
For named content with a known title/subtitle/description/actions shape, use ContentBlock instead — fixed slots and free prose need different spacing mechanisms.
Import
import { Prose } from '@brikdesigns/bds';Variants
Sanitized HTML
import { sanitizeHtml } from '@/lib/sanitize';
<Prose html={sanitizeHtml(cmsField)} />Empty content
Empty or falsy html renders nothing — Prose is a no-op, not an empty wrapper element.
<Prose html="" /> // renders nullProps
| Prop | Type | Default |
|---|---|---|
html | string | — (required) |
Related
- ContentBlock — the fixed-slot counterpart
- Page Structure — Content blocks and prose — the spacing map both components share