# Prose **Full documentation:** https://webawesome.com/docs/utilities/prose CSS Utilities Prose Wrap a block of content in `wa-prose` to apply a hierarchical, asymmetric typographic rhythm: generous space above headings, tighter space below, more breathing room around major non-text blocks, and a true section divider for `
`. Spacing is em-based and scales with `wa-font-size-*` utilities. Reach for it on documentation, blog posts, articles, or marketing copy. Element styling (color, font, borders) still comes from [native styles](https://webawesome.com/docs/utilities/native/); `wa-prose` only adjusts rhythm, type scale, and the reading column. ## Using Prose Wrap your long-form content in any block element with the `wa-prose` class. ```html

Section heading

Body content…

``` By default, content is constrained to a comfortable reading column of `65ch`. Override `--wa-prose-line-length` on the container — or set `max-inline-size` directly — to widen, narrow, or remove the constraint. ## Examples ### Headings & Paragraphs Each heading level gets generous space above and tight space below, so the eye reads it as part of the section it introduces — not the one it follows. When two headings sit back-to-back, the second tightens up so it reads as subordinate to the first. ```html

A short history of paper

From bark to broadsheet

Long before pulp mills and printing presses, people wrote on whatever surface would hold a mark. Clay, papyrus, palm leaves, bark, animal skins — each one pinned a culture's words to a place and a moment.

The rag era

Early European paper was beaten from cotton and linen rags. Quality was measured in fiber: the longer the strand, the stronger the sheet, the longer it survived in a binding.

Watermarks and laid lines

Hold a rag sheet up to the light and you can still see the maker's mark and the fine lines pressed in by the mould — small signatures of the hand that pulled it.

``` ### Lists Lists get a small breath between multi-line items. Quiet markers and bold `
` terms come from [native styles](https://webawesome.com/docs/utilities/native/). ```html
  1. Warm the pot with a splash of hot water; pour it out.
  2. Measure one teaspoon of leaves per cup, plus one for the pot.
  3. Pour, cover, and wait — three minutes for black, two for green.
Steep
To soak leaves in hot water until the flavor is fully released.
Decant
To pour brewed tea off its leaves to halt further extraction.
Cupping
A side-by-side tasting used to evaluate tea or coffee.
``` ### Inline Elements Inline elements you'd reach for in long-form writing — ``, ``, ``/``, `` — work as expected inside a prose container, styled by [native styles](https://webawesome.com/docs/utilities/native/). ```html ``` ### Major Blocks Code samples, tables, callouts, and collapsible `
` get more breathing room than running prose, so they read as distinct chunks of content rather than another sentence. ```html ``` ### Section Breaks `
` marks a topic shift. Its own margin defines the gap; the heading or paragraph that follows hugs up to it so the divider stays visually anchored to what comes next. ```html ``` ## Typographic Details A few quieter refinements come along with the rhythm: - **Oldstyle proportional figures** in running text so numerals sit alongside letters more naturally. - **Hanging punctuation** pulls opening quotes, em-dashes, and trailing stops into the margin (Safari today; progressive enhancement elsewhere). - **Long-word breaks** on `` and `
` so URLs and identifiers can't overflow the column.

## Composing with Font Size Utilities

Apply any [`wa-font-size-*`](https://webawesome.com/docs/utilities/text/#font-size) utility to a `wa-prose` container and text, headings, and rhythm scale together. No size variants required.

```html

```

## Adjusting Rhythm

Set `--wa-prose-rhythm-scale` on the prose container to multiply every margin in the system. Values below `1` tighten the rhythm; values above loosen it. Type sizes are unaffected.

```html

```

## Composing with Other Utilities

The `wa-prose` class and its element rules sit at `0,0,0` specificity, so any utility class you apply alongside — `wa-heading-m`, `wa-cluster`, `wa-text-center`, and so on — wins automatically. The same goes for plain element rules in your own stylesheet, no `!important` or specificity tricks required.

```css
/* Wins against wa-prose's `h2 { font-size: 2em }` */
h2.release-header {
  font-size: var(--wa-font-size-m);
}
```

## Theming

Color flows from your theme's [color tokens](https://webawesome.com/docs/tokens/color/), so prose follows dark mode and theme changes automatically. To recolor an element inside prose, use a descendant selector on your container.

```css
.changelog.wa-prose a {
  color: var(--wa-color-brand-on-quiet);
}
```

## Opting out of Prose

Apply `wa-not-prose` to any element inside a `wa-prose` container to disable prose rhythm for that element and its descendants. Other utilities — `wa-cluster`, `wa-stack`, `wa-font-size-*` — keep working in the opt-out subtree.

```html

```