Use the `.prose` wrapper to style long-form content without adding classes to every element.

How it works

Wrap your content in the .prose class to apply long-form typography styles to headings, paragraphs, lists, tables and other common elements. Use it when you render Markdown, MDX or the output of a WYSIWYG editor, where you can't add classes to every element.

• Sets a base font-size and line-height for comfortable reading.
• Normalizes list spacing and nested list indentation.
• Adds consistent margin-bottom on headings and paragraphs.
• Gives blockquotes, code, and tables a readable default style.

Example

This example shows typical content wrapped in .prose.

<div class="prose">
  <h1>Getting started with documentation</h1>
  <p> Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users understand complex concepts quickly and efficiently. </p>
  <blockquote>
    <p>Documentation is a love letter that you write to your future self.</p>
  </blockquote>
  <p>The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs.</p>
</div>

Callout

Wrap a short note in .callout to make it stand out from the surrounding text, for example a tip or a warning. It works inside or outside .prose.

<div class="callout">
  <p>
    <strong>Tip.</strong> Keep a glossary of terms your readers might not know. It saves you from re-explaining the same concept in every article.
  </p>
</div>

Inline HTML elements

HTML provides a long list of inline tags. These are commonly used inside .prose.

• Bold text uses <strong>.
• Italic text uses <em>.
• ==Highlighting== uses <mark>.
• Abbreviations like HTML use <abbr> with a title.
• Citations use <cite>.
• Deleted text uses <del> and inserted text uses <ins>.
• Superscript uses <sup> and subscript uses <sub>.

Most of these elements are styled by browsers with only light adjustments from Tabler.

Headings

Headings inside .prose get their sizes and margins from the wrapper. Keep them in order, so the document has one outline.

Code

Inline code is available with <code>. For multi-line snippets, use <pre><code>.

// Create a function that returns a sum function add(a, b) { return a + b; } 

<div class="prose">
  <p>Inline code looks like <code>console.log(&quot;Hello&quot;)</code> and uses monospace styling.</p>
  <pre><code>// Create a function that returns a sum function add(a, b) { return a + b; } </code></pre>
</div>

Lists

Use ordered lists for steps and unordered lists for related points.

<div class="prose">
  <ol>
    <li>Start with the most important information.</li>
    <li>Provide context before technical details.</li>
    <li>Include practical examples.</li>
  </ol>
  <ul>
    <li>Write clear, concise list items.</li>
    <li>Keep the structure consistent.</li>
    <li>Avoid overly long items.</li>
  </ul>
</div>

Images

Images should support the text and provide useful context.

<div class="prose">
  <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" />
  <img src="/static/photos/book-on-the-grass.jpg" alt="Book on the grass" />
  <img src="/static/photos/stylish-workspace-with-macbook-pro.jpg" alt="Workspace with laptop" />
</div>

Tables

Tables work best for comparing related data points.

<div class="prose">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Up-votes</th>
        <th>Down-votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>4</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Charlie</td>
        <td>7</td>
        <td>9</td>
      </tr>
      <tr>
        <td>Totals</td>
        <td>21</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

Accessibility

• prose styles content you do not control, so the headings inside it have to keep a sensible order - do not jump from h2 to h4.
• Images in prose need alt text. Use alt="" only when the caption already says the same thing.
• Links should make sense on their own. "Read more" repeated ten times gives a screen reader user a list of identical entries.
• Tables in prose need a th row. Prose styles them, but only the markup makes them readable.
• Do not rely on the prose colors for meaning. Keep the emphasis in strong and em.

Related