Text
<pura-text> renders a paragraph by default, a span when inline, or any of p/span/div via the as attribute. It exposes size, weight, color, align, and leading scales mapped to design tokens, plus a single-line truncate option. Theme it through the var(--pura-*) tokens and target its rendered element with the "text" CSS part.
Preview
<script type="module" src="/pura/lib/text.js"></script>
<!-- Default: renders a block <p> -->
<pura-text>Plain body text.</pura-text>
<!-- Size, weight, and color scales -->
<pura-text size="xl" weight="bold" color="primary">Page title</pura-text>
<pura-text size="sm" color="muted">Helper caption</pura-text>
<!-- Inline usage inside other text -->
<pura-text>
Saved as
<pura-text inline weight="semibold" color="accent">draft</pura-text>.
</pura-text>
<!-- Explicit tag override -->
<pura-text as="div" align="center" leading="relaxed">Centered block of text.</pura-text>
<!-- Single-line truncation -->
<pura-text truncate style="max-width: 200px">A long string that gets clipped.</pura-text>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
size | xs | sm | base | lg | xl | base | Font size scale, mapped to the --pura-text-* tokens. |
weight | normal | medium | semibold | bold | normal | Font weight (400 / 500 / 600 / 700). |
color | fg | muted | primary | accent | success | danger | fg | Text color, mapped to the corresponding theme token. |
align | left | center | right | left | Horizontal text alignment. |
leading | tight | normal | relaxed | normal | Line-height (1.25 / 1.5 / 1.75). |
truncate | boolean | false | Clamps the text to a single line with an ellipsis. |
inline | boolean | false | Renders a <span> and displays inline instead of a block <p>. |
as | p | span | div | p | Explicit tag override for the rendered element. |
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/text.js"></script>import "./pura/lib/text.js";