Page Heading — Cayuse Design System

Examples

Full page heading

Longitudinal study of soil microbiota

Under review

Proposal 24-0117 · National Science Foundation

html

<div class="cds-page-heading">
  <div class="cds-page-heading__main">
    <nav class="cds-breadcrumb" aria-label="Breadcrumb">…</nav>
    <div class="cds-page-heading__title-row">
      <h1 class="cds-page-heading__title">Longitudinal study of soil microbiota</h1>
      <span class="cds-status-pill cds-status-pill--blue">Under review</span>
    </div>
    <p class="cds-page-heading__subheading">Proposal 24-0117 · National Science Foundation</p>
  </div>
  <div class="cds-page-heading__actions">
    <button type="button" class="cds-button cds-button--secondary">Export</button>
    <button type="button" class="cds-button cds-button--primary">Submit for review</button>
  </div>
</div>

The demo above uses <h2> so it does not compete with this documentation page’s own <h1>. In a product, the page title is the <h1>.

Figma properties

Property	Values	Notes
`Breadcrumb?`	boolean	Show the trail above the title.
`Page Title?`	boolean	Show the title.
`Status Label?`	boolean	Show a Status Pill beside the title.
`Subheading?`	boolean	Show the supporting line beneath.
`H Buttons → Button Type`	Main Call to Action · Two Buttons · Three Button · None	The action group at the right.

Two annotations from the artboards:

“Call to action buttons — one primary action, or two secondary actions.” Not two primaries.
“Only have breadcrumb end if no Page Title” — otherwise the last crumb and the title are the same text twice.
A layout note: if items are misaligned, switch the auto-layout between Space Between and Packed.

Usage

When to use it

Give every view a page heading — it is what tells the user where they landed.
Match the page title to the document <title>.
Put page-level actions here and nowhere else.
Use the subheading for the identifiers that qualify the title — record number, sponsor, dates.

When not to use it

Do not use more than one primary button.
Do not repeat the title as the last breadcrumb.
Do not put row-level or section-level actions in the page heading.
Do not let the title and the action group collide at narrow widths; the actions wrap below.

Accessibility

The title is the page’s only <h1>.
The status pill sits inside the title row but outside the <h1>, so the heading text stays clean in a headings list.
Action buttons come after the title in the DOM, matching the visual order for keyboard users.
After a client-side navigation, move focus to the <h1> so the new view is announced.

Tokens consumed

Token	Applied to	Resolves to
`--type-page-title-*`	Title	24 / 28 / Bold
`--type-subheading-*`	Subheading	16 / 20 / Regular
`--color-gray-500`	Subheading colour	`#5e5e5e`
`--spacing-8` / `--spacing-16`	Internal gaps	8px / 16px