Heading
A semantic heading component that renders h1-h6 elements with sensible default sizes and weights.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Heading />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
8 tests across 1 file. Auto-generated from the test suite.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
h2 with small text
h3 with 3xl text
h4 with lg text, normal weight
Default tight tracking (h1)
Normal tracking
Wide tracking
Render the heading's visual styling on a non-h* element when it shouldn't be part of the document outline.
Heading styles on a paragraph
Pick a heading level to see it applied live.
This is a level 2 heading
API Reference
Heading
Size, Weight and Tracking auto-resolve from Level when left unset: sizes are h1=4xl, h2=3xl, h3=2xl, h4=xl, h5=lg, h6=base; weights are h1/h2=bold, h3/h4=semibold, h5/h6=medium; tracking defaults to "tight" for h1/h2 and unset otherwise.
| Prop | Type | Default | Description |
|---|---|---|---|
| Level | int | 2 | Heading level 1–6, driving both the rendered h{Level} tag (unless As overrides the tag) and the default size/weight/tracking scale. Clamped to [1, 6] (default 2). |
| As | string? | — | Render the heading's visual styling on this element tag instead of the semantic h{Level} (e.g. "p", "div", "span") — the asChild-style escape hatch for "looks like a heading, isn't one in the document outline". Visual only; supply role/aria-level via attributes for heading semantics. Null = the normal h{Level}. (#295) |
| Size | string? | — | Text-size utility suffix (e.g. "xl", "2xl"), overriding the size the current Level would default to. |
| Weight | string? | — | Font-weight utility suffix (e.g. "semibold"), overriding the weight the current Level would default to. |
| Tracking | string? | — | Letter-spacing utility suffix (e.g. "tight"), overriding the tracking the current Level would default to. Levels 3–6 default to no tracking class unless set here. |
| ChildContent | RenderFragment? | — | The heading's text content. |
| Class | string? | — | Additional CSS classes merged onto the heading element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the heading element. |