Headingcomponent

Section heading — renders an <h2>.

• Sits between <Title> (<h1>) and <Subheading> (<h3>) in the heading hierarchy.

A section heading — renders an <h2>. It sits in the middle of the three-level heading family: <Title> (<h1>), Heading (<h2>), <Subheading> (<h3>).

Things to know:

• Pick the component that matches the level rather than overriding level. Choosing <Title> / Heading / <Subheading> keeps the visual size and the document outline in step, which matters for accessibility and the docs-site table of contents.
• The level prop (1–6) is an escape hatch for the rare case where the outline level must differ from the visual size — avoid it in normal use.
• Inside <Prose>, an <h2> is styled by the same rules (the shared .prose styling), so Markdown-rendered headings match component ones.
• Accepts color= and the typography variants; like all block components it collapses its outer margin when it's the first/last child of its container.

Usage

Section heading

import { Heading, Paragraph } from "shelving/ui";

<Heading>Billing</Heading>
<Paragraph>Manage your plan and payment method.</Paragraph>

The heading family together

import { Title, Heading, Subheading } from "shelving/ui";

<Title>Account</Title>        {/* <h1> */}
<Heading>Security</Heading>   {/* <h2> */}
<Subheading>Sessions</Subheading> {/* <h3> */}

Coloured heading

import { Heading } from "shelving/ui";

<Heading color="red">Danger zone</Heading>

Styling

Heading exposes hooks for its rhythm and type. It inherits text colour by default (so it picks up the surrounding tint); set --heading-color only to override that.

Global tokens it reads: --space-section, --space-paragraph, --font-title, --weight-strong, --size-xxlarge, and --leading. (<Title> and <Subheading> share this component and expose the parallel --title-* / --subheading-* hooks.)

/* Theme: serif headings, a touch larger. */
:root {
  --heading-font: var(--font-serif);
  --heading-size: var(--size-xxxlarge);
}