Brik Design System
Components

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.

Use it for

  • CMS-authored rich text with no fixed slot shape (event descriptions, long-form marketing copy)
  • Migrating brikdesigns' .rich-content blocks 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 null

Props

PropTypeDefault
htmlstring— (required)

On this page

💬