Prose
Stable Available in release assets
Give long-form semantic HTML a calm reading measure and consistent vertical rhythm without requiring an authored class on every descendant.
Prose primary example
<article class="thin-prose" aria-labelledby="field-notes-title">
<header>
<p>Field notes · <time datetime="2026-08-01">August 1, 2026</time>
</p>
<h2 id="field-notes-title">Designing for content that refuses to be tidy</h2>
</header>
<p class="thin-lede">Readable defaults should survive long words, nested lists, code, quotations, figures, and languages with very different rhythms.</p>
<h3 id="meaning-first">Start with meaning</h3>
<p>Choose the element that describes the content. A <a href="#reference">real link remains recognizable</a>, and <code>overflow-wrap</code> protects the measure without changing the words.</p>
<blockquote>
<p>Presentation can support a document, but it should not become the document.</p>
<footer>— Interface field guide</footer>
</blockquote>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>A written fallback keeps the point available when media does not load.</figcaption>
</figure>
<h4 id="reference">Review checklist</h4>
<ul>
<li>Keep headings in order.</li>
<li>Label abbreviations and include units in text.</li>
<li>Test <code>https://example.test/a-deliberately-unbroken-reference-that-must-wrap</code>.</li>
</ul>
</article>Show code
<article class="thin-prose" aria-labelledby="field-notes-title">
<header>
<p>Field notes · <time datetime="2026-08-01">August 1, 2026</time>
</p>
<h2 id="field-notes-title">Designing for content that refuses to be tidy</h2>
</header>
<p class="thin-lede">Readable defaults should survive long words, nested lists, code, quotations, figures, and languages with very different rhythms.</p>
<h3 id="meaning-first">Start with meaning</h3>
<p>Choose the element that describes the content. A <a href="#reference">real link remains recognizable</a>, and <code>overflow-wrap</code> protects the measure without changing the words.</p>
<blockquote>
<p>Presentation can support a document, but it should not become the document.</p>
<footer>— Interface field guide</footer>
</blockquote>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>A written fallback keeps the point available when media does not load.</figcaption>
</figure>
<h4 id="reference">Review checklist</h4>
<ul>
<li>Keep headings in order.</li>
<li>Label abbreviations and include units in text.</li>
<li>Test <code>https://example.test/a-deliberately-unbroken-reference-that-must-wrap</code>.</li>
</ul>
</article>Variant gallery
Each authored example uses the production assets and includes copyable markup.
Article
Long-form article markup with metadata header, lede, quotations, figures, and nested headings.
<article class="thin-prose" aria-labelledby="field-notes-title">
<header>
<p>Field notes · <time datetime="2026-08-01">August 1, 2026</time>
</p>
<h2 id="field-notes-title">Designing for content that refuses to be tidy</h2>
</header>
<p class="thin-lede">Readable defaults should survive long words, nested lists, code, quotations, figures, and languages with very different rhythms.</p>
<h3 id="meaning-first">Start with meaning</h3>
<p>Choose the element that describes the content. A <a href="#reference">real link remains recognizable</a>, and <code>overflow-wrap</code> protects the measure without changing the words.</p>
<blockquote>
<p>Presentation can support a document, but it should not become the document.</p>
<footer>— Interface field guide</footer>
</blockquote>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>A written fallback keeps the point available when media does not load.</figcaption>
</figure>
<h4 id="reference">Review checklist</h4>
<ul>
<li>Keep headings in order.</li>
<li>Label abbreviations and include units in text.</li>
<li>Test <code>https://example.test/a-deliberately-unbroken-reference-that-must-wrap</code>.</li>
</ul>
</article>Show code
<article class="thin-prose" aria-labelledby="field-notes-title">
<header>
<p>Field notes · <time datetime="2026-08-01">August 1, 2026</time>
</p>
<h2 id="field-notes-title">Designing for content that refuses to be tidy</h2>
</header>
<p class="thin-lede">Readable defaults should survive long words, nested lists, code, quotations, figures, and languages with very different rhythms.</p>
<h3 id="meaning-first">Start with meaning</h3>
<p>Choose the element that describes the content. A <a href="#reference">real link remains recognizable</a>, and <code>overflow-wrap</code> protects the measure without changing the words.</p>
<blockquote>
<p>Presentation can support a document, but it should not become the document.</p>
<footer>— Interface field guide</footer>
</blockquote>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>A written fallback keeps the point available when media does not load.</figcaption>
</figure>
<h4 id="reference">Review checklist</h4>
<ul>
<li>Keep headings in order.</li>
<li>Label abbreviations and include units in text.</li>
<li>Test <code>https://example.test/a-deliberately-unbroken-reference-that-must-wrap</code>.</li>
</ul>
</article>Documentation section
A semantic section can use the same prose skin inside a wider documentation page.
<section class="thin-prose" aria-labelledby="docs-section">
<h2 id="docs-section">Installation</h2>
<p>Install the package, import production CSS, and keep semantic HTML as the source of truth.</p>
<pre>
<code>npm install @thin-sky/ui</code>
</pre>
</section>Show code
<section class="thin-prose" aria-labelledby="docs-section">
<h2 id="docs-section">Installation</h2>
<p>Install the package, import production CSS, and keep semantic HTML as the source of truth.</p>
<pre>
<code>npm install @thin-sky/ui</code>
</pre>
</section>Editorial lede
The optional .thin-lede class increases introductory emphasis without replacing heading structure.
<article class="thin-prose">
<h1>Field notes</h1>
<p class="thin-lede">A short opening paragraph that sets context before the first section heading.</p>
<h2>Overview</h2>
<p>Supporting detail follows in normal paragraph rhythm.</p>
</article>Show code
<article class="thin-prose">
<h1>Field notes</h1>
<p class="thin-lede">A short opening paragraph that sets context before the first section heading.</p>
<h2>Overview</h2>
<p>Supporting detail follows in normal paragraph rhythm.</p>
</article>Prose with figures
Figures, captions, and missing-media fallbacks remain authored and readable without enhancement.
<article class="thin-prose">
<h2>Annotated diagram</h2>
<figure>
<img src="diagram.png" alt="Annotated supply chain diagram">
<figcaption>The complete caption remains adjacent to the figure.</figcaption>
</figure>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>Written fallback when media cannot load.</figcaption>
</figure>
</article>Show code
<article class="thin-prose">
<h2>Annotated diagram</h2>
<figure>
<img src="diagram.png" alt="Annotated supply chain diagram">
<figcaption>The complete caption remains adjacent to the figure.</figcaption>
</figure>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>Written fallback when media cannot load.</figcaption>
</figure>
</article>Anatomy
- Semantic prose container
- Optional header and lede
- Ordered heading hierarchy
- Paragraphs and lists
- Links and inline code
- Block quotations
- Figures and captions
Variants and sizes
- Article — shown above
- Documentation section — shown above
- Editorial lede — shown above
- Prose with figures — shown above
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
Narrow container and long unbroken reference
Overflow-wrap protects measure when URLs or identifiers cannot break naturally.
<article class="thin-prose" style="max-inline-size: 22rem">
<h2>Long references</h2>
<p>Test <code>https://example.test/a-deliberately-unbroken-reference-that-must-wrap</code> in a narrow column.</p>
</article>Show code
<article class="thin-prose" style="max-inline-size: 22rem">
<h2>Long references</h2>
<p>Test <code>https://example.test/a-deliberately-unbroken-reference-that-must-wrap</code> in a narrow column.</p>
</article>Deeply nested lists
Ordered and unordered lists keep native markers and indentation without flex formatting context.
<article class="thin-prose">
<h2>Nested structure</h2>
<ul>
<li>Top level<ol>
<li>Nested ordered item</li>
<li>Another nested item<ul>
<li>Third level remains readable</li>
</ul>
</li>
</ol>
</li>
</ul>
</article>Show code
<article class="thin-prose">
<h2>Nested structure</h2>
<ul>
<li>Top level<ol>
<li>Nested ordered item</li>
<li>Another nested item<ul>
<li>Third level remains readable</li>
</ul>
</li>
</ol>
</li>
</ul>
</article>Missing media fallback
Named fallback content keeps the editorial point available when media fails.
<article class="thin-prose">
<h2>Figure unavailable</h2>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>Caption remains with the fallback.</figcaption>
</figure>
</article>Show code
<article class="thin-prose">
<h2>Figure unavailable</h2>
<figure>
<div data-media-missing role="img" aria-label="Diagram unavailable">Diagram unavailable</div>
<figcaption>Caption remains with the fallback.</figcaption>
</figure>
</article>- Narrow container — shown above
- Wide container — documented, example pending
- Long unbroken references — shown above
- Deeply nested lists — shown above
- Missing media fallback — shown above
- Right-to-left content — documented, example pending
- Print — documented, example pending
- Two-hundred-percent text — documented, example pending
Interaction and keyboard behavior
Prose owns no interaction. Links, details, media controls, and other native descendants retain their browser behavior and focus treatment.
Accessibility
Use the semantic element that matches the document, keep heading levels coherent, provide meaningful link text and media alternatives, and do not use visual type size as a substitute for structure.
- Contract
COMPOSE- Basis
- Native document content and table/scroll region; no APG widget
- Evidence
tests/unit/library/content-patterns.test.ts
API
Add .thin-prose to an article, section, or other semantic long-form container. Optional .thin-lede increases introductory emphasis; --thin-prose-measure and --thin-prose-space tune measure and rhythm locally.
Behavior tier: native
Custom properties
PropertyDefaultDescription
--thin-prose-measure70chMaximum readable inline measure.--thin-prose-space1lhVertical rhythm between direct prose children, one line by default.Fallback
The complete semantic document, heading hierarchy, links, lists, quotation attribution, and media fallback remain readable without CSS or JavaScript.
Assets and dependencies
/components.css
Dependencies: None
Source: packages/ui/src/items/prose/style.ts
Stability evidence
- Semantic heading hierarchy, block quotations, figures, missing-media fallback, and no-JavaScript fixture:
test:tests/unit/library/content-patterns.test.ts - Complete item-specific API, fallback, variant coverage, and difficult-state documentation:
test:tests/unit/library/content-patterns.test.ts - Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture:
review:site/src/pages/quality/index.astro#quality-review
Composition
Derived from the examples and style specs, not authored.