Heading
pura-heading renders an actual heading element (h1 through h6) in its shadow root based on the level attribute, so the document outline stays semantically correct. Visual size, weight, color, alignment, and letter-spacing are controlled separately through tokens, letting you decouple how a heading looks from where it sits in the hierarchy. All sizes and colors trace back to Pura design tokens, so headings stay consistent across themes.
Preview
<script type="module" src="/pura/lib/heading.js"></script>
<!-- Semantic level drives both the tag and the default size -->
<pura-heading level="1">Page title</pura-heading>
<!-- Keep the semantic level but override the visual size -->
<pura-heading level="2" size="lg">Section title that looks smaller</pura-heading>
<!-- Tune weight, color, alignment, and tracking -->
<pura-heading level="3" weight="600" color="primary" align="center" tracking="normal">
Styled subheading
</pura-heading>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Semantic heading level. Renders the matching h1-h6 tag and sets the default visual size when no size is given. |
size | xs | sm | md | lg | xl | 2xl | 3xl | (derived from level) | Overrides the visual size independently of the semantic level. |
weight | 400 | 500 | 600 | 700 | 800 | 700 | Font weight of the heading text. |
color | fg | muted | primary | accent | success | danger | fg | Text color, mapped to a Pura color token. |
align | start | center | end | justify | start | Horizontal text alignment. |
tracking | tight | normal | wide | tight | Letter-spacing of the heading text. |
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/heading.js"></script>import "./pura/lib/heading.js";