Description list
A key-value grid for detail panels, metadata displays, and summary cards.
Wraps the native <dl> element. The most-rebuilt pattern
in SaaS apps after page headers.
Account detail panel
Acme Corporation
- Status
- Active
- Plan
- Enterprise
- MRR
- $2,400/mo
- Owner
- Jane Smith
- Created
- Jan 15, 2024
With dividers
- Case ID
- CASE-2024-0815
- Priority
- High
- Assignee
- MKMarcus Kane
- Tags
- fraud escalated
Stacked layout
- Last login
- 2 hours ago from 192.168.1.42
- Two-factor auth
- Enabled
- Session count
- 3 active sessions
- Region
- us-east-1
- API key
- pk_live_••••••••4242
- Rate limit
- 1,000 req/min
Uniform term width
Set --c-description-term-w to a fixed width for a uniform
label gutter across multiple cards.
- Total revenue
- $148,200
- Active subscriptions
- 247
- Avg. contract value
- $600/mo
Inside a drawer (container-query collapse)
The grid mode collapses to stacked below 32rem container width — simulating the panel width of a side drawer.
- Subject
- Quarterly review prep
- Priority
- Urgent
- Due date
- Jun 30, 2024