This page ships a Markdown twin for AI tools.

ComponentsHeading

displaytexulinot agent-emittableapp

Heading

heading

A page title or section heading: a semantic h1–h6 with a size from the type scale.

One token contract, every theme. Display components take color, radius, density and state styling from the --tx-* token contract — the same variables the theme strip below overrides — so a theme swap re-colors them without per-component fixes.

Live examples

Page title

Page title

Loading demo…

Muted section heading

Muted section heading

Responsive hero title

Responsive hero title

Small card title

Small card title

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for Heading
NameKindRequiredDefaultDescription
levelnumberno2The semantic level, 1 to 6: renders <h1>…<h6>
sizeenum (display, 4xl, 3xl, 2xl, xl, lg, md, sm, xs)no"lg"Visual size, independent of the level (default from the level: 1 xl, 2 lg, 3 md, 4–6 sm); xs is ~0.875rem for small card titles; 2xl–4xl sit between xl and display
responsivebooleannofalseScale the size down on narrow screens: fluid from two scale steps below up to the size
trackingenum (default, tight)no"default"Letter spacing: the role's own, or tight (--tx-letter-spacing-tight)
toneenum (default, muted)no"default"—
truncatebooleannofalseOne line with an ellipsis
labelstringno—Plain-text heading, escaped; replaces children when both are given
classstringno——
childrenslotno—The heading text

Keyboard

Keyboard behavior for Heading
KeyAction
—See accessibility notes for keyboard behavior.

Accessibility

  • Renders the semantic heading element for its level; pick levels in document order.
  • size changes only the look, never the level announced to assistive technology.

Evidence for heading

Latest committed gates for heading (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/heading · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Title a page, a section or a panel
  • Keep visual hierarchy in a locked prototype, where typography utilities are refused

Don’t use when

Prefer another component

  • Body copy, labels or captions (use text)
  • Long-form content (use prose)