Title

A block-level heading at one of six levels. The level drives both the type scale (font-size + line-height) and the vertical rhythm (margins above and below); it’s also surfaced to assistive tech via aria-level. Pair with priority (primary → quinary, mapping to --text-1 … --text-5) and tone (brand, success, critical, warning, info) exactly as you would on Text.

Raw <h1>–<h6> get the same default styling via anta’s reset, so reach for a real heading tag when SEO matters and you don’t need the tone / priority props. Use <Title> when you do.

Levels in context

Six levels interleaved with paragraphs of <Text>, all rendered with tone="brand" against a branded surface so the type scale and vertical rhythm read clearly.

Children

<Title> accepts arbitrary children — there are intentionally no icon / iconTrailing props because children are the API. Drop any inline content beside the title text.

<Title level={3}>
  <Icon shape="book-open" /> Section with a leading icon
</Title>

<Title level={3}>
  Mix it all — title text and{' '}
  <span style={{ color: 'var(--text-1-brand)' }}>accents</span>
</Title>

To tint a portion of a title’s text, drop a <span> with color: var(--text-{1-5}-{tone}) inline. Don’t nest another <Text> / <a-text> inside a <Title> — <a-text> is a block-level text-container with its own color hierarchy and link rules, and heading elements should hold inline phrasing content only.

Level reference

Level 1 is the only level with a zero margin-block-start baked in. For the rest, expect a top margin even when the heading is the first thing inside its container — wrap the container in something with its own padding or zero the heading’s margin yourself when you need it flush.

Tone × priority

All five priorities (columns) crossed with all six tones (rows, starting with neutral), demonstrated at level={3}. Neutral (no tone) shifts through --text-1 → --text-5; each tone remaps the same priority steps onto its tinted scale. The grid scrolls horizontally on narrow viewports.

Accessibility

<Title> renders an <a-title> styled tag (not a real <h*>) and attaches role="heading" with aria-level={level} so screen readers announce it correctly. Search-engine crawlers, however, generally ignore ARIA headings — if SEO matters, write raw <h{level}> instead (it gets the same visual treatment from the reset) and skip the component.