Prose

Rich text styling for long-form content. Applies typography, spacing, and element styles to any container.

Usage

Wrap any block of HTML content with .prose to get styled headings, paragraphs, lists, blockquotes, links, code blocks, and media.

<article class="prose">
<h1>Article Title</h1>
<p>Body text with <a href="#">links</a> and <code>inline code</code>.</p>
<ul>
  <li>List items</li>
  <li>Are styled automatically</li>
</ul>
<blockquote>Blockquotes get a left border.</blockquote>
</article>

import { Prose } from '@mrmartineau/zui/react'

<Prose>
<h1>Article Title</h1>
<p>Body text with <a href="#">links</a> and <code>inline code</code>.</p>
<ul>
  <li>List items</li>
  <li>Are styled automatically</li>
</ul>
<blockquote>Blockquotes get a left border.</blockquote>
</Prose>

---
import { Prose } from '@mrmartineau/zui/astro'
---

<Prose>
<h1>Article Title</h1>
<p>Body text with <a href="#">links</a> and <code>inline code</code>.</p>
<ul>
  <li>List items</li>
  <li>Are styled automatically</li>
</ul>
<blockquote>Blockquotes get a left border.</blockquote>
</Prose>

What it styles

• Headings — h1–h4 with type scale, heading font family, and balanced text wrapping
• Flow spacing — automatic vertical rhythm via --flow-code>
• Links — accent-coloured with underline decoration and hover transitions
• Lists — nested list style types (disc → circle → square for ul; decimal → lower-roman → lower-alpha for ol)
• Blockquotes — left border with italic styling
• Code — inline <code></code>/<pre></pre> blocks with monospace font and background
• Media — images, iframes, and videos get border-radius and a subtle border
• Horizontal rules — styled as a thin background-colour line

Custom properties

.prose {
  --prose-color: var(--text-color);
  --prose-accent-color: var(--accent-9);
  --prose-link-color: var(--accent-11);
  --prose-link-color-decoration: var(--accent-7);
  --prose-link-color-decoration-hover: var(--accent-8);
  --prose-code-color: var(--violet-11);
  --prose-code-bg-color: var(--violet-3);
}

Modifiers