Page Title

ready

The page-level H1 with an underline accent, for the one heading a screen gets.

The Page Title is the single H1 for a screen — not Heading, which marks a section within a card and repeats down the page. Page Title gets an underline beneath the text rather than a bar beside it, so the two never look interchangeable, and room for one helper line underneath.

Anatomy

Personal Information

All information with a * is a required field.

  1. 1 Title — the H1, with an underline accent
  2. 2 Helper — optional line beneath — required-field notice, a subtitle

Variants

Default

Hour Upload

<PageTitle text="Hour Upload" />

With a helper line

Personal Information

All information with a * is a required field.

<PageTitle text="Personal Information" helper="All information with a * is a required field." />

Usage

✓ Do

Personal Information

Use exactly one Page Title per screen, at the top of the main content column.

✕ Don't

Mailing Address

Don't use it for a section inside a card — that's Heading.

Accessibility

  • Renders a real <h1> — one per page, establishing the document’s outline.

Props

PropTypeDefaultNotes
textstring—The title text.
helperstring—Optional line under the title.
  • Heading — the section-level counterpart, used repeatedly down a page.