Prose

A descendant-styling wrapper for CMS and markdown content. It sets the prose font, applies consistent spacing, and maps WordPress alignment classes. No BEM elements — it styles all child HTML.

Default

<div class="ln-prose">
  <h2>The vertical rhythm system</h2>
  <p>The library runs on two nested grids: a base grid of 8px for every box,
     and a line grid of 24px that every line of text sits on.</p>
  <ul>
    <li>Line-heights are whole lines</li>
    <li>Boxes sit on the base grid</li>
    <li>Borders never add height</li>
  </ul>
  <blockquote>
    <p>Every vertical measurement lands on an 8px grid.</p>
  </blockquote>
  <p>Inline elements like <code>code</code>, <strong>bold</strong>, and
     <em>italic</em> are styled by the base layer and work inside prose.</p>
</div>

The vertical rhythm system

The library runs on two nested grids: a base grid of 8px for every box, and a line grid of 24px that every line of text sits on.

Line-heights are whole lines
Boxes sit on the base grid
Borders never add height

Every vertical measurement lands on an 8px grid.

Inline elements like code, bold, and italic are styled by the base layer and work inside prose.

UI variant

The --ui modifier switches to the sans-serif font for help text and documentation contexts.

<div class="ln-prose ln-prose--ui">
  <p>This prose block uses the system sans-serif font instead of the
     default serif stack. Useful for documentation and help text.</p>
</div>

This prose block uses the system sans-serif font instead of the default serif stack. Useful for documentation and help text.

Reference

Class	Description	Responsive
`.ln-prose`	Long-form content wrapper (serif font, prose measure)	No
`.ln-prose--sm`	Smaller body text size	No
`.ln-prose--lg`	Larger body text size	No
`.ln-prose--ui`	Sans-serif font instead of serif	No
`.ln-prose--wide-media`	Allow images and figures to break out to container width	No