Prose

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.

<article class="prose">
	<h2>A day at North Bay</h2>
	<p>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.</p>
	<h3>What to bring</h3>
	<ul>
		<li>Shoes for the climb to the lookout</li>
		<li>A hat and water</li>
		<li>Cash for the park fee</li>
	</ul>
	<blockquote>
		<p>The emerald lake is a short walk from the beach.</p>
	</blockquote>
	<p>The booking code is <code>ANG-0812</code>; show it at the pier.</p>
</article>

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 <h1> starts at <h2>.
• 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, 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.