Prose

Mode

Skin

Theme

Overview & Philosophy

Rich-text editorial content styling for Markdown, TipTap, or WYSIWYG editor output. Add class="prose" to any wrapper containing semantic HTML to enable comfortable reading line lengths, vertical rhythm, and typography scale.

All Elements — Full Showcase

Document Title (h1)

This is the opening paragraph of a rich-text document. It uses the body-md typography role with a reading-optimized max-width of 65 characters.

Section Heading (h2)

Paragraphs are spaced using the > * + * lobotomised owl selector so margin is only added between sibling elements.

A second paragraph follows. Links are styled with the primary colour and an underline. Hover thickens the underline.

Subsection (h3)

Content continues under the subsection heading.

Minor heading (h4)

The heading hierarchy maps to heading-lg, heading-md, heading-sm, and title-md typography roles.


Text formatting

Text can be bold (semibold weight), italic, or contain inline code styled in monospace with a secondary background.

Lists

  • Unordered list — disc style
  • Second item with a longer description that wraps onto multiple lines to show line-height behaviour
  • Third item
  1. Ordered list — decimal
  2. Second numbered step
  3. Third step

Blockquote

An organization's quality management system should be documented in a quality manual that includes the scope, exclusions, and references to procedures.

Code block

// Example code block
const document = await fetch('/api/documents/123');
const data = await document.json();
console.log(data.title);

Image

ln-ashlar logo example
Figure caption styled with the caption typography role

Table

Document Standard Status
Quality Manual ISO 9001 Approved
Risk Register ISO 27001 In Review
Incident Procedure ISO 45001 Draft

End of prose content. The max-width is 65ch — enough for comfortable reading without excessive eye travel.