Heading

ready

Section heading with a purple accent bar, used to title form sections.

The Heading titles a section of a record. A purple accent bar sits to the left of the text, which uses the H4 type token (Inter Medium 18/24).

Anatomy

Profile

  1. 1 Accent bar — purple rule marking the start of a section
  2. 2 Text — the section title, set in the H4 type token

Variants

Default

Profile

<Heading text="Profile" />

Stacked sections

Mailing Address

File & Audit History

<Heading text="Mailing Address" />
<Heading text="File & Audit History" />

Usage

✓ Do

Identification

Use one heading per logical form section.

✕ Don't

Please fill in all of the fields below before saving

Don't use the heading for long sentences or helper copy.

Accessibility

  • Render section titles as real heading elements so the page has a navigable outline; keep the heading levels in a logical order down the page.
  • The accent bar is decorative and conveys no meaning on its own.

Content

  • Use a short, sentence-case noun phrase (“Mailing address”).
  • Name the section’s content, not an instruction.

Props

PropTypeDefaultNotes
textstring—The heading text.
  • Tokens — the H4 type token and brand purple used here.
  • Text Field — the inputs that sit under a heading.