# Heading

> A page title or section heading: a semantic h1–h6 with a size from the type scale. One token contract, every theme. Catalog id heading.

Language: en
Canonical: https://texuli.com/component-pages/heading/
Markdown: https://texuli.com/component-pages/heading.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[Components](https://texuli.com/component-pages/) Heading

display texuli not agent-emittable app

`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.

- Violetlight mode · AA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)
- Monochromelight mode · AA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)
- Accessible Dark Contrastdark mode · AAA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)

## Props

Public props for Heading

| Name | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `level` | `number` | no | `2` | The semantic level, 1 to 6: renders <h1>…<h6> |
| `size` | `enum` (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 |
| `responsive` | `boolean` | no | `false` | Scale the size down on narrow screens: fluid from two scale steps below up to the size |
| `tracking` | `enum` (default, tight) | no | `"default"` | Letter spacing: the role's own, or tight (--tx-letter-spacing-tight) |
| `tone` | `enum` (default, muted) | no | `"default"` | — |
| `truncate` | `boolean` | no | `false` | One line with an ellipsis |
| `label` | `string` | no | — | Plain-text heading, escaped; replaces children when both are given |
| `class` | `string` | no | — | — |
| `children` | `slot` | no | — | The heading text |

## Keyboard

Keyboard behavior for Heading

| Key | Action |
| --- | --- |
| `—` | 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/a no 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)

## Related

- [`text`](https://texuli.com/component-pages/text/)
- [`prose`](https://texuli.com/component-pages/prose/)

## For agents

The live preview, prop editor and copyable code run in the browser. The component manifest holds the same props, events, examples and guidance as data. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `component.get`: Read a component manifest with `{"id":"heading"}`.
- `example.search`: Find component examples.
- `catalog.search`: Search the component catalog.

Docs:

- [heading component doc (Markdown)](https://texuli.com/llms/components/heading.md)
- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)
- [@texuli/catalog README](https://github.com/DailybotHQ/texuli/blob/main/packages/catalog/README.md)