Content block

Bento card

A titled card in a grid. Only a card that opens something lifts on hover.

Copy the bindings from: app/features/payments/routes/dashboard/payments/components/account-facts-grid.tsx
Route: /dashboard/accounts/:acctId/sites/:siteId/payments

Clickable, with an action label

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <BentoCard
    title="Details"
    actionLabel="Edit"
    icon={{
      $$typeof: Symbol(react.forward_ref),
      render: render,
    }}
    onActivate={onActivate}
  >
    <FactsGrid
      facts={[
        {
          label: 'Title',
          value: 'Winter vet fund',
        },
        {
          label: 'End date',
          value: 'Dec 31, 2026',
        },
      ]}
    />
  </BentoCard>
</Form>

Read-only, with facts

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <BentoCard
    title="Organization"
  >
    <FactsGrid
      facts={[
        {
          label: 'Name',
          value: 'Whisker Rescue',
        },
        {
          label: 'Email',
          value: '[email protected]',
        },
        {
          label: 'Website',
          value: 'https://whiskerrescue.org',
        },
        {
          label: 'Phone',
          value: '(718) 555-0110',
        },
        {
          label: 'Address',
          value: '102 Meadow View Drive, Apartment 4B',
        },
        {
          label: 'Tax ID on file',
          value: 'Yes',
        },
      ]}
    />
  </BentoCard>
</Form>

Two-column grid of read-only cards with title icons

Printed props

<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <div
    className="grid grid-cols-1 gap-4 md:grid-cols-2"
  >
    <BentoCard
      title="What donors see"
      titleIcon={{
        $$typeof: Symbol(react.forward_ref),
        render: render,
      }}
    >
      <FactsGrid
        facts={[
          {
            label: 'Card statement',
            value: 'WHISKER RESCUE',
          },
          {
            label: 'Receipt email',
            value: '[email protected]',
          },
        ]}
      />
    </BentoCard>
    <BentoCard
      title="Payouts"
      titleIcon={{
        $$typeof: Symbol(react.forward_ref),
        render: render,
      }}
    >
      <FactsGrid
        facts={[
          {
            label: 'Bank account',
            value: 'Chase ending in 6789',
          },
          {
            label: 'Schedule',
            value: 'Every week on Friday',
          },
        ]}
      />
    </BentoCard>
  </div>
</Form>