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
MK
Marcus 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