Prose

Rich-text container for article/blog content. Styles headings, paragraphs, lists, code, and pre blocks.

---

Classes

Class	Purpose
.prose	Container for rich text content

Styled Elements

Selector	Styling
.prose h2	font-size-2xl, semibold, tight line-height
.prose h3	font-size-lg, semibold
.prose p	Relaxed line-height, bottom margin
.prose ul, ol	Left padding, relaxed line-height
.prose li	Small bottom margin
.prose code	Mono font, surface-alt background, small padding
.prose pre	Surface background, rounded-lg, overflow-x auto
.prose pre code	Reset padding and background

Preview

<div class="prose" style="font-size: var(--font-size-sm)">
  <h2 style="margin-top: 0">Heading Level 2</h2>
  <p>Paragraph with <code>inline code</code> and normal text content for demonstration.</p>
  <h3>Heading Level 3</h3>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
  </ul>
</div>

Heading Level 2

Paragraph with inline code and normal text content for demonstration.

Heading Level 3

• First list item
• Second list item

---

Usage

<div class="prose">
  <h2>Section Title</h2>
  <p>Paragraph with <code>inline code</code>.</p>
  <ul>
    <li>List item</li>
  </ul>
  <pre><code>code block</code></pre>
</div>