Components
DescriptionList
Data-driven term/value rows rendered as a semantic dl, inline or stacked.
DescriptionList renders an array of term/detail pairs as a semantic
<dl> with a top and bottom rule on each row. Pass layout="inline" (the
default) to set the term in a fixed-width column beside its value, or
layout="stacked" to put the term above the value. Reach for it on detail and
summary screens where the data is a known set of fields.
Example
Preview
- Plan
- Pro
- Seats
- 24 / 50
- Renewal
- May 11, 2026
import { DescriptionList } from '@officina/ui';
<DescriptionList
items={[
{ term: 'Plan', detail: 'Pro' },
{ term: 'Seats', detail: '24 / 50' },
{ term: 'Renewal', detail: 'May 11, 2026' },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | DescriptionItem[] | — | Term/description pairs to render. |
| layout | enum | inline | `stacked` puts the term above the value; `inline` puts them side by side. |