Heading

Renders a semantic heading element with configurable level and size. Size accepts responsive values: size={{ base: "lg", md: "2xl" }}.

The library of materials

import { Heading, headingSizeClasses } from "@desk/ui/components/heading";

Set level (h1–h6) for the document outline and size for visual scale independently — don't pick a tag just to get a size; a small-looking heading can still be an h2.
Keep one h1 per page and don't skip levels for styling; use size (responsive-capable) to make a lower-level heading look larger.

Prop	Type	Default	Description
level	`HeadingLevel \| undefined`	`"2"`	Semantic heading tag rendered (`h1`–`h6`); independent of visual `size`.
size	`ResponsiveValue<"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"> \| undefined`		Visual size — accepts a static size or responsive object like `{ base: "lg", md: "2xl" }`

Used by