Heading

A heading renders an h1 to h6 with a size from the --text-* scale. The level (as) is for the document outline; the size is visual and defaults per level, so an h1 can be small and an h4 can be large. Nothing hardcodes a pixel size: a retheme of the type scale moves every heading.

import Heading from '@zuilib/components/heading'

Levels

Without size, each level takes a step of the scale: h1 is 3xl, h2 2xl, h3 xl, h4 lg, h5 md, h6 sm.

Loading example

Size independent of level

size overrides the per-level default. Pick as for the outline and size for the layout.

Loading example

Weight and tracking

weight maps to --font-weight-*. tracking maps to --tracking-*; left unset, 2xl and 3xl get tight and smaller sizes set nothing, so they inherit the surrounding letter-spacing.

Loading example

Truncate

truncate keeps the heading on one line with an ellipsis; the element needs a bounded width.

Loading example

Props

HeadingProps extends the h2 element attributes with:

Prop	Type	Default	Description
as	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h2'	The rendered tag and outline level
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'	per level	h1 3xl, h2 2xl, h3 xl, h4 lg, h5 md, h6 sm
weight	'normal' | 'medium' | 'semibold' | 'bold'	'semibold'
tracking	'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'	'tight' at 2xl / 3xl	Below 2xl no class is set and letter-spacing inherits; pass 'normal' to reset
truncate	boolean	false	Single line with an ellipsis
className	string	—	Merged last, after the size, weight and tracking classes

Slots

Slot	Element	Notes
[data-slot="heading"]	h1 to h6	Root. Also data-size, data-weight and data-truncate

/* Consumer CSS: serif display headings */
[data-slot="heading"][data-size="3xl"],
[data-slot="heading"][data-size="2xl"] {
  font-family: var(--font-serif);
}

Tokens

Token	Used for
--text-xs … --text-3xl (and their line heights)	size
--font-weight-normal/medium/semibold/bold	weight
--tracking-tighter … --tracking-widest	tracking
--foreground	Text colour

Accessibility

• Renders a real heading element, so assistive technology reads the outline from as. Keep levels sequential (one h1, then h2, …) and use size for the look.
• The heading carries no ARIA of its own; add id when a section is linked or referenced by aria-labelledby.
• truncate hides overflow visually only; the full text stays in the accessibility tree. Add a title or a tooltip if the cut-off matters.

Related

• Text: body copy on the same scale, with colour variants.
• Card and EmptyState: components with a heading slot.
• Theming: the type scale, weights and tracking tokens.