SummaryList

Amount: $60,000.00
To: Beta LLC · ****4821
Rail: Wire
Reference: INV-2041

SummaryList renders labelled values as a proper <dl>. It's what a governed dialog uses to show the exact terms you're approving.

Usage

import { SummaryList } from "@sina-design-system/core";

<SummaryList
  items={[
    { label: "Amount", value: "$60,000.00", emphasis: true },
    { label: "To", value: "Beta LLC" },
    { label: "Rail", value: "Wire" },
  ]}
/>

Examples

Key/value rows

Account: Operating · ****4821
Owner: Treasury team
Opened: Jun 27 · 09:14
Region: North

Emphasis · totals

Subtotal: $58,500.00
Wire fee: $25.00
Total: $58,525.00

Rich values · any node

Beneficiary: Beta LLC
Status: Verified
Notes: A longer descriptive value that exceeds the available width and wraps onto multiple lines within the row.

Props

Prop	Type	Default	Description
`items`	`SummaryItem[]`	—	The { label, value, emphasis? } rows.
`emphasis (per item)`	`boolean`	—	Highlight a key row, like the amount.

Accessibility

Rendered as <dl>/<dt>/<dd>, so the label/value relationship is exposed to assistive tech.