# Prose Long text that comes from an editor or from Markdown, where no element carries a class: a page's content in a preview, a help page, a note. One class on the wrapper sets the size, the rhythm and the measure of everything inside. ## Examples `prose` on the element that holds the text. Headings, paragraphs, lists, quotes, code, rules, images and tables inside it take sizes for reading, a space between blocks and a line no longer than about 72 characters; the interface around it keeps its own smaller type. ```html

A day at North Bay

The boat leaves the pier at eight and is back before sunset. Lunch is on the beach, and the water is calm from December to April.

What to bring

Shoes for the climb to the lookout
A hat and water
Cash for the park fee

The emerald lake is a short walk from the beach.

The booking code is ANG-0812; show it at the pier.

``` ## Keyboard and accessibility - Prose styles the elements the text already has: its headings stay headings, so a screen reader walks them as it walks any page. Start the text's headings below the page's own: a `prose` inside a page with an `

` starts at `

`. - The measure keeps lines short enough to read; the text still wraps at any width, and a long word breaks rather than widening the page. - Links are underlined in the text, so they are not told apart by colour alone. ## Tokens From [`css/components/prose.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/prose.css), which declares no custom property of its own. It reads the theme's `--redz-text`, `--redz-fs-16`, `--redz-fs-32`, `--redz-fs-24`, `--redz-fs-20`, `--redz-fs-18`, `--redz-link`, `--redz-border`, `--redz-text-muted`, `--redz-radius-4`, `--redz-bg-hover`, `--redz-space-12`, `--redz-space-16`, `--redz-radius-8`, `--redz-bg-page`, `--redz-fs-14`, `--redz-space-8`.