docs/pages/ui/base/prose.mdx - dev - githubmirror/tabler

docs/pages/ui/base/prose.mdx
76 строк4 KB
Paweł Kuna
Improve docs SEO, performance and content quality (#2841)
11 авг 2026, 15:45
11 авг 2026, 15:4539634cb
---
title: Prose
summary: Use the `.prose` wrapper to style long-form content without adding classes to every element.
description: Style long-form content with the prose class. Apply consistent typography to headings, paragraphs, lists, and tables without extra classes.
related: [/ui/base/typography]
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import Prose from '@ui/Prose.astro';

## 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. This is especially useful when rendering Markdown, MDX, or content from a [WYSIWYG editor](/ui/components/wysiwyg).

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

<Example>
<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> </Prose>
</Example>

## 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 help readers scan long documents quickly. Use them to create a clear hierarchy and maintain a logical flow.

### Code

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

<Example>
<Prose> <p>Inline code looks like <code>console.log("Hello")</code> and uses monospace styling.</p> <pre><code>// Create a function that returns a sum function add(a, b) &#123; return a + b; &#125; </code></pre> </Prose>
</Example>

### Lists

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

<Example>
<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> </Prose>
</Example>

### Images

Images should support the text and provide useful context.

<Example>
<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" /> </Prose>
</Example>

### Tables

Tables work best for comparing related data points.

<Example>
<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> </Prose>
</Example>