Components / Heading

Heading

The one heading primitive. as picks the outline level for the document structure; variant picks a bundled visual preset from the type scale. The two axes are independent.

import { Heading } from '@layers/ui/heading'

Rendered stock

House rules

• as is required and chosen for accessibility (the document outline), never for size; the same element renders at any preset.
• Each variant locks size, weight, tracking, and line height together; never reach for raw text-[..] or font-* on a heading. Extend the scale by adding a variant.
• className is for layout only (flex, truncate, alignment), never type overrides.
• label is the mono uppercase eyebrow recipe; mono belongs on all-caps text only.