Any title on a page: the public headline, the page title, a section, a subsection, a dialog.

import {
  Body,
  PageHeading,
  SectionHeading,
  Stack,
  SubsectionHeading,
} from "@hackcove/ui";

<Stack gap="sm">
  <PageHeading>Quotes</PageHeading>
  <SectionHeading rule>Open</SectionHeading>
  <SubsectionHeading>Awaiting reply</SubsectionHeading>
  <Body as="p">Three quotes are waiting on the customer.</Body>
</Stack>

import { Body, PageHeading, Stack } from "@hackcove/ui";

<Stack gap="sm">
  <PageHeading>Quotes</PageHeading>
  <Body as="p">Three quotes are waiting on the customer.</Body>
  <PageHeading>Open</PageHeading>
  <Body as="p">Two quotes are open.</Body>
</Stack>

import { Display, Lead, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Display>Tools for people who build</Display>
  <Lead>The supporting sentence that sits under the headline.</Lead>
</Stack>

import { Body, Display, PageHeading, Stack } from "@hackcove/ui";

<Stack gap="sm">
  <PageHeading>Dashboard</PageHeading>
  <Display as="h2">Recent activity</Display>
  <Body as="p">Nothing has changed since yesterday.</Body>
</Stack>

• A page has one title: PageHeading for an app page, Display for the headline of a public page. A PageHeader already draws the PageHeading and its subtitle, so use it for the top of a page.
• Name the parts of a page with SectionHeading; rule puts the hairline under it, with the space either side built in.
• Name what is inside a part with SubsectionHeading: size sm (default) is a form-group caption, base a card title in a header bar, lg a drawer title.
• ModalHeading is the title of a dialog or drawer, and Dialog and Drawer draw it from their title. Do not place one on a page.
• Put a Lead under a Display, and a Subtitle under any other heading.
• Pick the heading for its place in the outline, never for its size. Display is not a big SectionHeading.
• color takes default, secondary, tertiary, muted or brand for the hierarchy of the text. A heading's meaning is carried by its words, not a colour.
• as changes the element, only to keep the outline in order, and never the look.

• Each heading renders a real heading element: Display and PageHeading an h1, SectionHeading and ModalHeading an h2, SubsectionHeading an h3.
• as swaps the element and keeps the look, so the outline can follow the page without a visual change.
• id, aria-* and data-* go on the heading element.
• Dialog and Drawer draw their own ModalHeading and name themselves by it; an EmptyState draws its SectionHeading the same way.