Usage

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

Article Title

Body text with links and inline code.

List items
Are styled automatically

Blockquotes get a left border.

<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>

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

<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>

<template>
<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>
</template>

<script setup>
import { Prose } from '@mrmartineau/zui/vue'
</script>

Kitchen sink

Heading 1

Paragraph text with a link, bold, italic, and inline code.

Heading 2

Another paragraph to show flow spacing between elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 3

Heading 4

Unordered list item one
Item two
- Nested item
- Another nested item
  - Deeply nested
Item three

Ordered list item one
Item two
1. Nested ordered
2. Another nested
  1. Deeply nested
Item three

A blockquote for emphasis or attribution. Styled with a left border and italic text.

// Code block
const greeting = 'Hello, world!'
console.log(greeting)

Content after a horizontal rule.

<article class="prose">
  <h1>Heading 1</h1>
  <p>Paragraph text with <a href="#">a link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
  <h2>Heading 2</h2>
  <p>Another paragraph to show flow spacing between elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <ul>
    <li>Unordered list item one</li>
    <li>Item two
      <ul>
        <li>Nested item</li>
        <li>Another nested item
          <ul>
            <li>Deeply nested</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Item three</li>
  </ul>
  <ol>
    <li>Ordered list item one</li>
    <li>Item two
      <ol>
        <li>Nested ordered</li>
        <li>Another nested
          <ol>
            <li>Deeply nested</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Item three</li>
  </ol>
  <blockquote>A blockquote for emphasis or attribution. Styled with a left border and italic text.</blockquote>
  <pre><code>// Code block
const greeting = 'Hello, world!'
console.log(greeting)</code></pre>
  <hr />
  <p>Content after a horizontal rule.</p>
</article>

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

<Prose>
<h1>Heading 1</h1>
<p>Paragraph text with <a href="#">a link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
<h2>Heading 2</h2>
<p>Another paragraph to show flow spacing.</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<ul>
  <li>Unordered list item</li>
  <li>Item two<ul><li>Nested</li></ul></li>
</ul>
<ol>
  <li>Ordered list item</li>
  <li>Item two<ol><li>Nested</li></ol></li>
</ol>
<blockquote>A blockquote for emphasis.</blockquote>
<pre><code>{'const greeting = "Hello, world!"'}</code></pre>
<hr />
<p>Content after a horizontal rule.</p>
</Prose>

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

<Prose>
<h1>Heading 1</h1>
<p>Paragraph text with <a href="#">a link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
<h2>Heading 2</h2>
<p>Another paragraph to show flow spacing.</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<ul>
  <li>Unordered list item</li>
  <li>Item two<ul><li>Nested</li></ul></li>
</ul>
<ol>
  <li>Ordered list item</li>
  <li>Item two<ol><li>Nested</li></ol></li>
</ol>
<blockquote>A blockquote for emphasis.</blockquote>
<pre><code>const greeting = 'Hello, world!'</code></pre>
<hr />
<p>Content after a horizontal rule.</p>
</Prose>

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

<Prose>
<h1>Heading 1</h1>
<p>Paragraph text with <a href="#">a link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
<h2>Heading 2</h2>
<p>Another paragraph to show flow spacing.</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<ul>
  <li>Unordered list item</li>
  <li>Item two<ul><li>Nested</li></ul></li>
</ul>
<ol>
  <li>Ordered list item</li>
  <li>Item two<ol><li>Nested</li></ol></li>
</ol>
<blockquote>A blockquote for emphasis.</blockquote>
<pre><code>{'const greeting = "Hello, world!"'}</code></pre>
<hr />
<p>Content after a horizontal rule.</p>
</Prose>

<template>
<Prose>
  <h1>Heading 1</h1>
  <p>Paragraph text with <a href="#">a link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
  <h2>Heading 2</h2>
  <p>Another paragraph to show flow spacing.</p>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <ul>
    <li>Unordered list item</li>
    <li>Item two<ul><li>Nested</li></ul></li>
  </ul>
  <ol>
    <li>Ordered list item</li>
    <li>Item two<ol><li>Nested</li></ol></li>
  </ol>
  <blockquote>A blockquote for emphasis.</blockquote>
  <pre><code>const greeting = 'Hello, world!'</code></pre>
  <hr />
  <p>Content after a horizontal rule.</p>
</Prose>
</template>

<script setup>
import { Prose } from '@mrmartineau/zui/vue'
{'</script>'}

What it styles

Headings — h1–h4 with type scale, heading font family, and balanced text wrapping
Flow spacing — automatic vertical rhythm via --flow-space
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 / 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-accent-color: var(--color-theme);
  --prose-link-color: var(--color-text);
  --prose-link-color-decoration: oklch(from var(--color-text) l c h / 50%);
  --prose-link-color-decoration-hover: oklch(from var(--color-text) l c h / 90%);
  --prose-code-color: oklch(from var(--color-text) calc(l + 0.1) c h);
  --prose-code-bg-color: oklch(from var(--color-background) calc(l + 0.1) c h);
  --prose-scroll-margin: 1.5rem;
}

Modifiers

.prose.inverted Inverted colour scheme for dark backgrounds

.prose.max-width-p Limits paragraph width to 65ch for readability