Pattern

Section headings

The uppercase label that starts a section of a drawer or a step, or labels a group of values.

Copy it from /dashboard/accounts/:acctId/sites/:siteId/fundraisers/:slug/edit

Section tone

Divides a drawer, modal, or step body and is followed by content. The hairline runs to the right edge.

Route: /dashboard/accounts/:acctId/sites/:siteId/fundraisers/:slug/edit
Screenshot: docs/agents/ui-patterns/section-headings-1440.png

Donor · Thank-you page

Pre-fills the share copy donors see after they give.

<SectionHeading
  tone="section"
>
  Donor · Thank-you page
</SectionHeading>

Section tone with an action

The action takes the hairline’s end, as the contract queue’s Add does. An action that adds something is the dashed, tinted button; any other is a text link.

Route: /dashboard/accounts/:acctId/sites/:siteId/contracts/groups

Contracts · Signing order

1. Dog Adoption Contract, then 2. Feline Adoption Contract.

<SectionHeading
  tone="section"
  action={{
    label: 'Add',
    icon: 'add',
    onPress: openAddMenu2,
  }}
>
  Contracts · Signing order
</SectionHeading>

Caption tone

Labels a value group inside a card, a review group, or a list. No hairline.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind?review=:id

Status

In Progress since Oct 12, 2026.

<SectionHeading
  tone="caption"
>
  Status
</SectionHeading>

Caption tone with an action

The action sits at the right end of the card’s title row.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind?review=:id

Latest note

Called the landlord; pets are allowed.

<SectionHeading
  tone="caption"
  action={{
    label: 'View all',
    onPress: showAllNotes,
  }}
>
  Latest note
</SectionHeading>