Titlecomponent

Page title — renders an <h1>.

• The most prominent heading on a page; there should normally be exactly one.

The top-level page heading — renders an <h1>. It is the most prominent member of the three-level heading family: Title (<h1>), <Heading> (<h2>), <Subheading> (<h3>). There should normally be exactly one Title per page.

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.
• 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.
• Inherits text colour by default so it picks up the surrounding tint; accepts color= and the typography variants.
• Inside <Prose> a raw <h1> is styled by the same rules, so Markdown-rendered titles match component ones.

Usage

Page title

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

<Title>Account</Title>
<Paragraph>Manage your profile and settings.</Paragraph>

Inside a panel header

import { Panel, Block, Title } from "shelving/ui";

<Panel as="header" color="primary">
  <Block width="narrow">
    <Title>Welcome</Title>
  </Block>
</Panel>

Styling

Title exposes hooks for its rhythm and type. It inherits text colour by default; set --title-color only to override that.

Global tokens it reads: --space-section, --space-paragraph, --font-title, --weight-strong, --size-xxxlarge, and --leading.