Anta design system

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.

Preview
level? — Heading level, 1-6. Drives font-size, line-height, and vertical rhythm. Also surfaced to assistive tech via `aria-level`. Defaults to 2 (h1 is typically reserved for the page title).
priority? — Visual priority. Maps to text-1..text-5. Defaults to 'primary' (text-1).
tone? — Color tint. Applies the matching `--text-{N}-{tone}` palette.
className? — CSS class name. Merged with any internal classes by the component.
style? — Inline styles applied to the root element.
children? — Child elements. When provided, replaces the component's default label/content.

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.

Level 1 — page titleDonec a tincidunt elit. Mauris vehicula, est nec porta cursus, tellus eros vestibulum lectus, vitae luctus turpis enim sed nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.Level 2 — section headingCurabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.Level 3 — subsectionProin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.Level 4Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.Level 5Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Level 6Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.

Children

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

Section with a leading icon Icons inside <Title> get a small upward nudge via transform: translateY(-0.05em) so they sit at the optical middle of the title’s uppercase text. Default vertical-align: middle aligns the icon’s center with the middle of the parent text’s lowercase x-height, which lands visually low in headings. Mix it all — title text and accents 
<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

levelfont-sizeline-heightmargin-block-startmargin-block-end
128px32px016px
224px28px32px12px
320px24px24px12px
417px20px20px8px
515px20px16px8px
613px16px16px4px

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.

Neutral primarySecondaryTertiaryQuaternaryQuinaryBrand primarySecondaryTertiaryQuaternaryQuinarySuccess primarySecondaryTertiaryQuaternaryQuinaryCritical primarySecondaryTertiaryQuaternaryQuinaryWarning primarySecondaryTertiaryQuaternaryQuinaryInfo primarySecondaryTertiaryQuaternaryQuinary

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.