Block-level heading with level 1-6, priority, tone, and optional truncation.
Renders an <a-title> styled tag (no JS, no shadow DOM) with
role="heading" and aria-level={level} set by this wrapper for
accessibility. Children can be anything — text, icons, badges, links
— so there are no icon / iconTrailing props; compose
inside.
<Title> carries no vertical margins: it's a spacing-neutral atom
that drops into any container, and the parent owns spacing (a gap
or padding). Raw <h1>-<h6> do keep per-level top/bottom margins
(via src/reset.css) for document prose rhythm — so use a real
heading tag if SEO matters or you want that built-in rhythm and don't
need the tone / priority props.
Styling notes (a-title.css ships comment-free): <a-title> is
intentionally CSS-only — no JS, no shadow DOM, not even
customElements.define; the browser treats it as a generic unknown
element and the CSS gives it block layout, the demi-bold variable-font
weight, and the per-level type scale. The matching h1–h6 rules in
src/reset.css share that type scale and weight, so raw markup reads
the same as <Title level={n}> — they diverge only on margins: raw
headings carry the document vertical rhythm, <a-title> is margin-free.
The tone × priority color matrix has the same shape as a-text's.
Requires @antadesign/anta/elements to be imported (client-side only)
so the CSS ships with the page.
Block-level heading with level 1-6, priority, tone, and optional truncation.
Renders an
<a-title>styled tag (no JS, no shadow DOM) withrole="heading"andaria-level={level}set by this wrapper for accessibility. Children can be anything — text, icons, badges, links — so there are noicon/iconTrailingprops; compose inside.<Title>carries no vertical margins: it's a spacing-neutral atom that drops into any container, and the parent owns spacing (agapor padding). Raw<h1>-<h6>do keep per-level top/bottom margins (viasrc/reset.css) for document prose rhythm — so use a real heading tag if SEO matters or you want that built-in rhythm and don't need thetone/priorityprops.Styling notes (
a-title.cssships comment-free):<a-title>is intentionally CSS-only — no JS, no shadow DOM, not evencustomElements.define; the browser treats it as a generic unknown element and the CSS gives it block layout, the demi-bold variable-font weight, and the per-level type scale. The matchingh1–h6rules insrc/reset.cssshare that type scale and weight, so raw markup reads the same as<Title level={n}>— they diverge only on margins: raw headings carry the document vertical rhythm,<a-title>is margin-free. The tone × priority color matrix has the same shape asa-text's.Requires
@antadesign/anta/elementsto be imported (client-side only) so the CSS ships with the page.