Card & description list
A titled surface with an optional action, and the label/value grid that usually sits inside it.
Customer summary
Customer
Kavita Rao · Nagpur
- Phone
- 98220 11001
- kavita@example.com
- Capacity
- 3 kW
- Budget
- ₹2,10,000
- Address
- 12 MG Road, Nagpur 440001
With an icon
A small tile before the title, so a dashboard’s cards can be told apart at a glance. For dashboard cards and record section cards; not for a card that only wraps a DataTable.
Stock by warehouse
Value at cost
- Bhosari main store
- ₹48,20,000
- Chakan plant store
- ₹19,75,000
Open purchase orders
- Castings, Kolhapur
- PO-0142 · due 6 Oct
- Mechanical seals
- PO-0145 · due 9 Oct
Options
Everything you can pass to Card & description list.
| Prop | Type | Default | What it does |
|---|---|---|---|
| title / description | ReactNode / string | — | Adds the header rule. The description clamps to two lines. |
| icon / tone | IconName / Tone | — / 'module' | A 28px IconTile before the title. |
| action | ReactNode | — | Right-aligned in the header: a filter, a link, a menu. |
| flush | boolean | false | No body padding, for a DataTable or a GhostEmpty that meets the edges. |