Properties
Key-value rows for detail panes and inspectors: muted keys, values that wrap, hairlines between rows.
Examples
Properties
- Status
- Live
- Owner
- Ada Lovelace
- Pages
- 128
- Domain
- northlight.app
- Updated
Stacked
data-stacked puts each key above its value, for narrow inspectors.- Project ID
- prj_7Hq2kd93mXa
- Region
- Europe West
Anatomy
dl.properties | Two columns, keys at most a third of the width. Small type. |
> dt | The key, muted. Exactly one per row. |
> dd | The value. A wrapping flex row, so badges, avatars and links sit inline; long values break anywhere rather than overflow. |
API
| Attribute | Values | Description |
|---|---|---|
data-stacked | boolean | Key above value in a single column, without hairlines between key and value. |
Accessibility
- A
<dl>keeps each key paired with its value for screen readers; don't rebuild it from<div>s. - Pair every
<dt>with exactly one<dd>, directly inside the<dl>: the hairlines and columns count on it. - If a value is editable, put the control in the
<dd>and label it with the key (aria-labelledbypointing at the<dt>'s id).