Typography
Typography (`<pura-prose>`) is a native web component that wraps rich HTML (headings, paragraphs, lists, quotes, code, images, and tables) and applies consistent typography via `::slotted`, with a comfortable reading measure and vertical rhythm. Use it to render articles, documentation, blog posts, or any long-form text without styling each element by hand. It's purely presentational, has no attributes, and is themeable through the `var(--pura-*)` tokens.
Preview
<pura-prose>
<h1>Introduction to pura</h1>
<p><strong>pura</strong> is a library of native <a href="#">Web Components</a> with no dependencies. Use <code><pura-prose></code> for long-form text with consistent typography.</p>
<h2>Why use it</h2>
<ul>
<li>Zero dependencies and lightweight</li>
<li>Themeable via CSS tokens</li>
<li>Vertical rhythm and a comfortable reading measure</li>
</ul>
<blockquote>Write plain HTML and let the component handle the rhythm.</blockquote>
</pura-prose>Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/prose.js"></script>import "./pura/lib/prose.js";