Heading

Heading is a title. It renders h1, h2, or h3 from level, with one recipe per level. It carries no margin. The layout owns the space around it.

import Heading from "@haloid/azucar/ui/heading";

Levels

Level 1 is the page title: text-2xl, semibold, tight tracking. Level 2 is a section or card title: text-base, medium. Level 3 is a title inside a section: text-sm, semibold. All three use fg-4. There is no level 4. A muted label is Text with variant="secondary".

<Heading level={2} muted="across 367 records">Verified accuracy</Heading>

Muted

muted is the quiet clause after the title, in fg-2, that scopes it: a count, a period, a facility. It inherits the level's size. CardHeader passes its own muted through this prop.

Use in north

The exported classes map shares each level's typography with components that need a different semantic element.

Page titles are level 1. Card titles render level 2 through CardHeader. The accuracy band title next to the radial stat is level 2 with Text below it.