tabler/docs/content/ui/base/prose.md

title, summary, bootstrapLink, description

title	summary	bootstrapLink	description
Prose	Use the `.prose` wrapper to style long-form content without adding classes to every element.	content/prose/	Long-form content styles for markdown-like HTML.

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.

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

{% capture html -%}

Getting started with documentation

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. Good documentation helps users understand complex concepts quickly and efficiently.

Documentation is a love letter that you write to your future self.

The foundation of great documentation starts with understanding your audience and their needs.

{%- endcapture %} {% include "docs/example.html" html=html %}

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

{% capture html -%}

Inline code looks like console.log("Hello") and uses monospace styling.

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

{%- endcapture %} {% include "docs/example.html" html=html %}

Lists

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

{% capture html -%}

1. Start with the most important information.
2. Provide context before technical details.
3. Include practical examples.

• Write clear, concise list items.
• Keep the structure consistent.
• Avoid overly long items.

{%- endcapture %} {% include "docs/example.html" html=html %}

Images

Images should support the text and provide useful context.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html %}

Tables

Tables work best for comparing related data points.

{% capture html -%}

Name	Up-votes	Down-votes
Alice	10	11
Bob	4	3
Charlie	7	9
Totals	21	23

{%- endcapture %} {% include "docs/example.html" html=html %}