Prose
Prose applies consistent typographic styling to nested HTML content such as headings, paragraphs, lists, and code blocks.
Basic Usage
Article Title
This content is styled by the prose container.
- First item
- Second item
import { Prose } from "@paramanu/typography-react"
export default function App() {return ( <Prose> <h2>Article Title</h2> <p>This content is styled by the prose container.</p> <ul><li>First item</li><li>Second item</li></ul> </Prose>)}<div class="pm-prose pm-prose--md"><h2>Article Title</h2><p>This content is styled by the prose container.</p><ul><li>First item</li><li>Second item</li></ul></div>Accessibility
Use as="article" for standalone content. Prose applies readable line heights and spacing that meet accessibility guidelines.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | "div" | "article" | "section" | "div" | HTML element |
size | "sm" | "md" | "lg" | "md" | Base font size scale |
color | "default" | "muted" | — | Color scheme |
trimMargins | boolean | false | Remove first/last child margins |
CSS Classes
| Class | Purpose |
|---|---|
pm-prose | Base |
pm-prose--{size} | Size |
pm-prose--color-{c} | Color scheme |
pm-prose--trim | Trim margins |