DescriptionList

Term and value pairs on a real <dl>, stacked or side by side.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add description-list

What add description-list installs alongside the component. The CLI skips any you already have in a compatible version.

2 examples · 1 component

The default: each term above its value, inside a card or a narrow column.

Side by side from sm up, with dividers; values can carry badges or actions.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`DescriptionList` The list of pairs.	`dl`	—
`layout` Term above its value, or side by side (1:2 columns) from the sm breakpoint up; inline always stacks on phones.	`"stacked" \| "inline"`	`"stacked"`
`divided` A border and vertical padding between pairs instead of a gap.	`boolean`	`false`
`DescriptionListItem` Groups one term with its value(s); a <div> is valid inside <dl>.	`div`	—
`DescriptionListTerm` The label, muted.	`dt`	—
`DescriptionListDetails` The value; long words wrap instead of overflowing. A term can have several.	`dd`	—

A real <dl>/<dt>/<dd>: screen readers announce a list and pair each term with its value, which a grid of divs cannot do.

The inline layout only changes columns; reading order is always term, then value.

Values can hold links, badges or buttons; give icon-only buttons a name that includes the term (label="Copy API key").

Server-safe: plain HTML and CSS.