Skip to content
quartiledocsv0.1
GitHub

Card

Preview

The white, hairline surface every chart and table sits in, with a title, a subtitle and header actions.

Example

Revenue by region

Sep 7 – Oct 6, 2026 · paid and pending orders

Revenue by region, 5 items. Highest North America at $179,327.88; lowest Middle East & Africa at $22,776.36.

Revenue by region
RegionRevenue
North America$179,327.88
Europe$118,152.67
Asia Pacific$74,519.75
Latin America$35,065.26
Middle East & Africa$22,776.36
<Card
  title="Revenue by region"
  subtitle="Sep 7 – Oct 6, 2026 · paid and pending orders"
  actions={
    <SegmentedControl aria-label="Period" size="sm" mono options={['7D', '30D']}
      value={period} onChange={setPeriod} />
  }
>
  <BarList
    data={period === '7D' ? orders.rows.filter((o) => o.date >= '2026-09-30') : orders}
    category="region"
    value="amount"
  />
</Card>

Usage

Use subtitle for the period, grain or filters in effect, and actions for controls that change the card's content. Set padded={false} for edge-to-edge tables; the header stays padded. The root is a section; change it with as.

Props

PropTypeDefaultDescription
titleReactNode——
subtitleReactNode—One line under the title: period, grain, filters in effect.
actionsReactNode—Right-aligned controls in the header: segmented controls, menus, a legend.
paddedbooleantruePad the body (default). Turn off for edge-to-edge tables; the header stays padded.
asElementType'section'Root element (default section).
childrenReactNode——

Also accepts the props of Omit<HTMLAttributes<HTMLElement>, 'title'>, spread onto the root element.

Accessibility

  • The root is a section by default. Give charts inside it their own aria-label; the card title is not read as the chart's name.
Report an issueBuilt Oct 21, 2026