Title ✦Documentation has not yet been reviewed by a human.

Use Title for page, section, and component headings. Choose a heading level, then adjust its emphasis with priority and tone.

Title has no margins. Use the parent’s gap or padding to space it within a layout. For native HTML heading elements, use <h1>–<h6> with Anta’s reset.

Levels

Choose level to match the heading hierarchy. It sets the type scale and the heading level announced by screen readers. This example uses a parent gap to space the titles.

Typeface

Use serif for page and section titles, sans-serif for cards, panels, and metrics, and monospace for identifiers such as run IDs and file paths.

Omit font to use the theme’s choice. The Antithesis theme uses serif for levels 1–3 and sans serif for levels 4–6. Other themes use sans serif throughout. Changing font preserves the heading’s size and line height.

<Title level={2}>Recent runs</Title>
<Title level={2} font="sans-serif">Run 4821: 12 failures</Title>
<Title level={2} font="monospace">checkout-service/run_4821</Title>

Each typeface covers all six levels.

<Title level={1} font="serif">Serif 1</Title>
<Title level={1} font="sans-serif">Sans serif 1</Title>
<Title level={1} font="monospace">Monospace 1</Title>

A string header on a Card renders a sans-serif title at every card size.

Inline content

Pass icons and inline elements as children. Icons are optically aligned with the title text.

<Title level={3}>
  <Icon shape="book-open" /> Saved items{' '}
  <span style={{ color: 'var(--text-1-brand)' }}>(3)</span>
</Title>

Use a span for a small inline accent. Don’t nest <Text> or <a-text> inside a title: they are block containers, while heading content should remain inline.

Truncation

Pass truncate for a single-line ellipsis or a positive number to clamp to that many lines. When the title is clipped, JSX Title shows its full text in a tooltip. A nested <Tooltip> overrides that automatic tooltip.

<Title truncate style={{ maxWidth: '320px' }}>
  A long workspace heading that stays on one line in a compact layout
</Title>

Use a number for multi-line titles.

<Title truncate={2}>A long heading clamped after its second line</Title>

Tone × priority

Use priority to choose emphasis, from primary through quaternary. Use tone for a named color or a custom CSS color. Omit it for neutral text. The examples compare every named tone at level={3}.

Accessibility

Title exposes role="heading" and an aria-level matching level. Choose levels that follow the page’s heading hierarchy. When your integration requires native HTML headings, use <h1>–<h6> with Anta’s reset for the same type scale and document margins.

<a-title level="2" tone="brand" role="heading" aria-level="2">
  Release notes
</a-title>

<Title priority="secondary">Supporting heading</Title>
<Title tone="#0d9488">Custom-tone heading</Title>

a-title.release-heading {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}