Content block

Facts grid

A record’s at-a-glance facts with small labels above wrapping values.

Copy the bindings from
app/features/people/routes/volunteers/components/person-drawer.tsx
Route
/dashboard/accounts/:acctId/sites/:siteId/volunteers?person=:id
Empty

No details yet.

Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <FactsGrid
    facts={[]}
  />
</Form>
One
Email
[email protected]
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <FactsGrid
    facts={[
      {
        label: 'Email',
        value: '[email protected]',
      },
    ]}
  />
</Form>
Many and long values
Email
[email protected]
Phone
(718) 555-0110
Date of birth
Dec 15, 1990
Address
102 Meadow View Drive, Apartment 4B, Brooklyn, NY 11215
Role
General Volunteer
Dashboard access
Not invited
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <FactsGrid
    facts={[
      {
        label: 'Email',
        value: '[email protected]',
      },
      {
        label: 'Phone',
        value: '(718) 555-0110',
      },
      {
        label: 'Date of birth',
        value: 'Dec 15, 1990',
      },
      {
        label: 'Address',
        value: '102 Meadow View Drive, Apartment 4B, Brooklyn, NY 11215',
      },
      {
        label: 'Role',
        value: 'General Volunteer',
      },
      {
        label: 'Dashboard access',
        value: 'Not invited',
      },
    ]}
  />
</Form>