Detail Card · Cirrus

The Detail Card shows settled information as label/value pairs, where a form grid would show the same fields as editable inputs. Rows whose value is null, undefined, or empty are dropped rather than rendered blank — an empty row reads as missing data, not as a field that was simply never collected.

Anatomy

Application Type: Certified Social Worker Type II
Status: Approved

1 Title / subtitle — optional header — a name, an ID, a date
2 Label / value rows — a definition list, label left, value right

Variants

Default

Type: CSW Type II
Status: Approved

<DetailCard title="Application 9635" rows={[{ label: "Type", value: "CSW Type II" }, { label: "Status", value: "Approved" }]} />

Compact

Tighter padding, for cards stacked in a narrow side rail.

Coordinator: Dana Whitfield

<DetailCard compact rows={[{ label: "Coordinator", value: "Dana Whitfield" }]} />

Empty rows are dropped

Email: a.okonkwo@example.com

<DetailCard title="Alternate contact" rows={[{ label: "Phone", value: "" }, { label: "Email", value: "a.okonkwo@example.com" }]} />

Usage

✓ Do

Outcome: Approved

Use for settled, read-only facts — an application summary, a decision record.

✕ Don't

First Name: Jordan (editable)

Don't use it for anything the reader can edit — that's a form grid, not a Detail Card.

Accessibility

Renders a real <dl>/<dt>/<dd> list, so assistive tech reads it as paired data rather than an unstructured block.

Props

Prop	Type	Default	Notes
`title`	`string`	—	Card header.
`subtitle`	`string`	—	Small line under the title — an ID, a date.
`rows`	`DetailRow[]`	`[]`	`{ label, value?, muted? }`. Rows with no value are dropped.
`compact`	`boolean`	`false`	Tighter padding for a side rail.

Data Table — the list view; Detail Card is the single-record view.