Prose Components

Use prose for long-form HTML content (docs, policies, guides). It applies readable typography and safe line lengths — unlike content-block, which is for structured marketing sections.

Variant: default

Balanced reading width for most pages (docs, policies, guides).

Default Prose (recommended)

Use this for most long-form content. It keeps line length comfortable and predictable.

Good for

Documentation pages
Privacy/terms
Guides and FAQs with lots of text

Prose content supports HTML: headings, paragraphs, lists, inline code, and links.

{
  "component": "prose",
  "variant": "default",
  "data": {
    "title": "Default Prose (recommended)",
    "content": "<p class=\"lead\">Use this for most long-form content. It keeps line length comfortable and predictable.</p><h3>Good for</h3><ul><li>Documentation pages</li><li>Privacy/terms</li><li>Guides and FAQs with lots of text</li></ul><p>Prose content supports HTML: headings, paragraphs, lists, inline code, and links.</p>",
    "bg": "white"
  }
}

<section class="bg-white py-4">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 mx-auto">
        <h2 class="mb-4">Default Prose (recommended)</h2>
        <div class="prose">
          <!-- HTML content here -->
        </div>
      </div>
    </div>
  </div>
</section>

Variant: narrow

Tighter reading width for highly text-dense pages.

Narrow Prose

Use narrow prose when you want a strong reading focus.

This is great for long articles, changelogs, or deeply technical docs where consistent rhythm matters.

AI tip: prefer 1–3 sentence paragraphs and avoid overly long lists.

{
  "component": "prose",
  "variant": "narrow",
  "data": {
    "title": "Narrow Prose",
    "content": "<p class=\"lead\">Use narrow prose when you want a strong reading focus.</p><p>This is great for long articles, changelogs, or deeply technical docs where consistent rhythm matters.</p><p><strong>AI tip:</strong> prefer 1–3 sentence paragraphs and avoid overly long lists.</p>",
    "bg": "light"
  }
}

<section class="bg-light py-4">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2 class="mb-4">Narrow Prose</h2>
        <div class="prose">
          <!-- HTML content here -->
        </div>
      </div>
    </div>
  </div>
</section>

Variant: wide

Full-width column for content that needs horizontal space (tables, embeds, diagrams).

Wide Prose

Use wide prose when the content needs room.

Examples: wide tables, embedded iframes, diagrams, or code blocks that would wrap too aggressively.

Note: for pure paragraphs, wide can feel harder to read.

{
  "component": "prose",
  "variant": "wide",
  "data": {
    "title": "Wide Prose",
    "content": "<p class=\"lead\">Use wide prose when the content needs room.</p><p>Examples: wide tables, embedded iframes, diagrams, or code blocks that would wrap too aggressively.</p><p><strong>Note:</strong> for pure paragraphs, wide can feel harder to read.</p>",
    "bg": "white"
  }
}

<section class="bg-white py-4">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="mb-4">Wide Prose</h2>
        <div class="prose">
          <!-- HTML content here -->
        </div>
      </div>
    </div>
  </div>
</section>

Variant: card

Use card prose to highlight important information or separate content visually.

Card Prose (highlight)

Great for notices, policies summaries, and key callouts.

When to use

Important announcements
Safety notices
Key constraints and requirements

{
  "component": "prose",
  "variant": "card",
  "data": {
    "title": "Card Prose (highlight)",
    "content": "<p class=\"lead\">Great for notices, policies summaries, and key callouts.</p><h3>When to use</h3><ul><li>Important announcements</li><li>Safety notices</li><li>Key constraints and requirements</li></ul>",
    "bg": "light"
  }
}

<section class="bg-light py-4">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 mx-auto">
        <div class="card shadow-sm">
          <div class="card-body p-4 p-lg-5">
            <h2 class="mb-4">Card Prose (highlight)</h2>
            <div class="prose">
              <!-- HTML content here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Next: use prose in docs pages

Prose is ideal for schema docs and “how to” pages. Use structured components when you need layout or marketing sections.

Docs Getting Started