Heading
A semantic section heading whose visual size is decoupled from its document level.
Live demo
Heading renders a native <h1>–<h6> chosen by level, while size sets the visual scale independently across seven steps (xs, sm, body, lg, xl, 2xl, 3xl). That split lets the document outline stay correct (an <h2> deep in a page) while the type still reads at whatever weight the layout wants (small label, or a hero at 3xl), so a site can stop faking type with raw tags and ad-hoc font sizes.
Three tones (default, muted, subtle) walk down the foreground ramp for primary titles, secondary headings, and quiet eyebrow labels. The display font carries every step.
When to use
How this component composes with the rest of the set.
level to keep the document outline correct, then pick size purely for the look. size="xs" or size="sm" with tone="subtle" for eyebrow labels above a larger title. Props
3 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Variants
default
Primary heading ink: full-strength foreground.
muted
Secondary ink for supporting headings.
subtle
Quiet ink for eyebrow and section labels.
accent
Accent-tinted ink for a highlighted title or a metric figure.
Sizes
xs
Smallest; a quiet label.
sm
Compact heading.
body
Body-scale heading; the derived default at level 5.
lg
Large; section titles.
xl
Extra large; page titles.
2xl
Display; section heroes.
3xl
Hero; page heroes.
4xl
Oversized; for hero titles.
5xl
Largest step; for landing-page headlines.
Anatomy
The named parts that make up the component, with their selectors.
heading
The native heading element (<h1>–<h6>) carrying the size and tone classes.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xoji-default register
(derive(xojiDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent-text
--fg-0
--fg-2
--fg-3
--font-display
--leading-normal
--leading-tight
--text-2xl
--text-3xl
--text-4xl
--text-5xl
--text-body
--text-lg
--text-sm
--text-xl
--text-xs
--weight-bold
--weight-semibold
Slots
The heading text.
Accessibility
<h1>–<h6> so the document outline and screen-reader heading navigation come for free. level controls the semantic tag; size is purely visual, so headings can shrink or grow without breaking the outline. Code
Levels, sizes, and tones
Level sets the tag; size sets the look; tone sets the ink, all independent.
<xoji-heading level="1" size="3xl">Themable derivation</xoji-heading>
<xoji-heading level="2" size="xl">The algorithm is the asset</xoji-heading>
<xoji-heading level="3" size="lg" tone="muted">A theme is the print</xoji-heading>
<xoji-heading level="2" size="sm" tone="subtle">Section label</xoji-heading><script lang="ts">
import { Heading } from "@xoji/svelte";
</script>
<Heading level={1} size="3xl">Themable derivation</Heading>
<Heading level={2} size="xl">The algorithm is the asset</Heading>
<Heading level={3} size="lg" tone="muted">A theme is the print</Heading>
<Heading level={2} size="sm" tone="subtle">Section label</Heading>---
import { Heading } from "@xoji/astro";
---
<Heading level={1} size="3xl">Themable derivation</Heading>
<Heading level={2} size="xl">The algorithm is the asset</Heading>
<Heading level={3} size="lg" tone="muted">A theme is the print</Heading>
<Heading level={2} size="sm" tone="subtle">Section label</Heading>