All components (204)

Title

Typography · Title · .amset-title

What it is and when to use it

A heading. It separates the LEVEL —which is semantics— from the SIZE —which is appearance—, which is exactly what gets mixed up badly by hand.

When to use it

On every section heading. The level places the page in the outline that a screen reader uses to jump around the content.
When a title has to look smaller, lower the size, never the level: lowering it to h3 to make it look small breaks that outline.

When not to

Below 16 px it no longer reads as a heading: what is needed there is Text with weight="bold".
The title of a dialog or a card is set by them (the title of Dialog and of Card): the dialog links it with aria-labelledby and the card uses it as the name of its button or link.

Keyboard: it does not take part, but it IS a navigation stop for heading navigation in a screen reader — which is its reason for existing.

Accessibility: a page has a single level={1} and does not skip levels downward (from a 2 you do not go to a 4). The text balances itself (text-wrap: balance) so that a single word is not left alone on the last line.

Fine-tuning: --amset-title-family, --amset-title-size, --amset-title-weight, --amset-title-color, --amset-title-leading and --amset-title-spacing. The scale goes up to 36 px; above that it is a cover-page hook and is requested with --amset-title-size.

What it looks like

A section heading

And one more below

<Title level={2}>A section heading</Title>
<Title level={3}>And one more below</Title>

Props

Import it with import { Title } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`level`required	`3 \| 4 \| 2 \| 5 \| 1 \| 6`	Semantic level, 1 to 6. Required: a heading without a level does not place itself in the page outline, and the outline is what a screen reader uses to jump through the content. A page carries a single `1` and does not skip levels downward.
`align`	`"center" \| "start" \| "end" \| "justify"`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`id`	`string`	—
`ink`	`"secondary" \| "primary"`	—
`lines`	`number`	Cuts to N lines. Takes precedence over `truncate`.
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	Size, deliberately separate from the level. An `h2` that has to look small in this card is still an `h2`: lowering it to `h3` to make it look smaller breaks the page outline.
`spacing`	`"wide"`	—
`style`	`CSSProperties`	—
`title`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`transform`	`"uppercase"`	—
`truncate`	`boolean`	A single line with an ellipsis. The text remains whole in the DOM.
`weight`	`"normal" \| "bold" \| "medium"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-title-family`	`var(--amset-font)`
`--amset-title-size`	`var(--amset-text-2xl)`
`--amset-title-weight`	`var(--amset-weight-bold)`
`--amset-title-color`	`var(--amset-ink)`
`--amset-title-leading`	`var(--amset-line-tight)`
`--amset-title-spacing`	`-0.01em`

How to change it

.amset-title {
  --amset-title-family: ...;
  --amset-title-size: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: