← Components/primitives

Heading

Carbon's productive heading scale, levels 1 through 7. Sibling to the Text primitive (which covers body / label / helper / code) and the Display primitive (which covers expressive marketing hero copy).

primitivesstablea11y: untested0/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

Livebrandtone

Edit JSX — preview updates livereact-live

import { Heading } from "@avala/design";

<Heading level="3" kind="productive" color="primary">Heading</Heading>

Variants

This component doesn't have a Storybook story yet. The catalog still tracks it so the gap is visible — see web/components/primitives/heading.tsx for the source.