Library · Foundations

Prose

Rich-text wrapper for slotted CMS/markdown content — styles p, lists, links, blockquotes with the official long-form scale (16px / line-height 1.5). Colour inherits, so Section bg pairings recolour it.

Live preview — edit theme bottom-right 
---
import Prose from "../components/primitives/prose/Prose.astro";
---
<Prose>
  <p>
    Prose styles slotted rich text with the long-form scale — 16px at
    line-height 1.5 — so CMS and markdown content reads well over multiple
    lines. It handles <strong>bold text</strong> and
    <a href="#">inline links</a> without any extra classes.
  </p>
  <ul>
    <li>Unordered lists get sensible indentation</li>
    <li>And spacing between items</li>
  </ul>
  <blockquote>
    Blockquotes pick up the .type-blockquote scale with a quiet rule.
  </blockquote>
  <p>Colour inherits, so Section background pairings recolour everything.</p>
</Prose>

Props

NameTypeRequiredDescription
class string — Additional classes
[key: string] unknown — HTML attributes
(slot) children — Rich content (e.g. Astro's <Content />).

Example with all props

<Prose class="article-body">
  <p>Paragraphs, <strong>bold</strong> and <a href="/x">links</a>…</p>
  <ul><li>Lists</li></ul>
  <blockquote>Pull quotes</blockquote>
</Prose>