Description List

Term and value pairs as a real <dl> — account details on a two-column grid, or a ruled list of figures — so each value is announced against its term.

tsx

1import { DescriptionList } from "@pestoui/core"

Grid

The default. Terms share one auto-width column; values sit right-aligned and truncate. An icon leads the value — mark it aria-hidden, it is decoration.

Workspace: Team workspace
Domain: example.com
Plan: Team
Billing: ending in 1234

Divided

layout="divided" gives each pair its own ruled row with a tabular value — the breakdown under a headline figure.

Started a trial: 642
Joined by invite: 418
Upgraded to Team: 148

Props

Prop	Type	Default	Description
items	{ id: string; term: ReactNode; details: ReactNode; icon?: ReactNode }[]	—	One pair each, in reading order.
layout	"grid" \| "divided"	"grid"	Bare <dt>/<dd> siblings on a two-column grid, or one ruled <div> row per pair.
className	string	—	On the <dl>. Type size is inherited, so set it here or on the parent.

PreviousDate Tile Next Dialog

Pesto UI · 117 documented components