--- 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] --- 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. Use it when you render Markdown, MDX or the output of a [WYSIWYG editor](/ui/plugins/wysiwyg), 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`.

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.

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

Tip. Keep a glossary of terms your readers might not know. It saves you from re-explaining the same concept in every article.

 ## Inline HTML elements HTML provides a long list of inline tags. These are commonly used inside `.prose`. - **Bold text** uses ``. - *Italic text* uses ``. - ==Highlighting== uses ``. - Abbreviations like HTML use `` with a `title`. - Citations use ``. - Deleted text uses `` and inserted text uses ``. - Superscript uses `` and subscript uses ``. 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 ``. For multi-line snippets, use `
`.



  
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; } 




### Lists

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



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

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




### Images

Images should support the text and provide useful context.



  Open book and coffee
  Book on the grass
  Workspace with laptop



### Tables

Tables work best for comparing related data points.



  

    
      

        Name
        Up-votes
        Down-votes
      

    
    
      

        Alice
        10
        11
      

      

        Bob
        4
        3
      

      

        Charlie
        7
        9
      

      

        Totals
        21
        23
      

    
  




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