On this page
Overview
Show code, Facts.tsx
Variants
- Automatic
Most lists. The default.
Labels: Beside their values, or above them in a narrow list.
- Inline
A wide region that never narrows.
Labels: Beside their values at every width.
- Stacked
Long values, such as addresses.
Labels: Above their values at every width.
Sizes
Smaller text, the default, suits a card or a pane, and body text a page of details.
Show code, Sizes.tsx
With controls
Values can be controls, such as switches, and each label sits on its control's line.
Show code, ControlsAligned.tsx
Anatomy
List
Item
Label
Value
Show code, DescriptionListAnatomy.tsx
Behaviour
Adapting to width
In the automatic layout, labels move above their values where the list is narrow.
Show code, FactsAtWidths.tsx
Rules
Use it when
- The facts about one item, such as a project's owner, status and dates
- An item's settings beside their labels, each a small control
Values
Keep headings and long paragraphs out of values and link to them instead, and don't put a description list inside another.