Pattern

Section headings

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

Copy the bindings from: app/features/fundraisers/routes/dashboard/fundraisers.slug.edit/components/share-messages-drawer-body.tsx
Route: /dashboard/accounts/:acctId/sites/:siteId/fundraisers/:slug/edit

6. Empty collection

A zero count is still visible.

Route: /dashboard/accounts/:acctId/sites/:siteId/volunteers

Assigned animals0

<SectionHeading
  tone="section"
  count={0}
>
  Assigned animals
</SectionHeading>

6. One item

The count follows the title in muted text.

Route: /dashboard/accounts/:acctId/sites/:siteId/volunteers

Assigned animals1

<SectionHeading
  tone="section"
  count={1}
  action={{
    label: 'Edit',
    onPress: openAddMenu2,
  }}
>
  Assigned animals
</SectionHeading>

6. Many items and one action

The same title row works for a larger collection.

Route: /dashboard/accounts/:acctId/sites/:siteId/volunteers

Assigned animals12

<SectionHeading
  tone="section"
  count={12}
  action={{
    label: 'Edit',
    onPress: openAddMenu2,
  }}
>
  Assigned animals
</SectionHeading>

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

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>