Property list
Examples
Section titled “Examples”Status & ansvar
- Lifecyklus
- A
- Status
- 20
- Auto-oprettet
- Nej
- Vareansvarlig
- LUI
Status & ansvar
- Lifecyklus
- A
- Status
- 20
- Auto-oprettet
- Nej
- Vareansvarlig
- LUI
<section class="property-list"> <h3 class="property-list-title">Status & ansvar</h3> <dl class="property-list-items"> <dt class="property-list-label">Lifecyklus</dt> <dd class="property-list-value">A</dd> <dt class="property-list-label">Status</dt> <dd class="property-list-value">20</dd> <dt class="property-list-label">Auto-oprettet</dt> <dd class="property-list-value">Nej</dd> <dt class="property-list-label">Vareansvarlig</dt> <dd class="property-list-value">LUI</dd> </dl></section><PropertyList title="Status & ansvar"> <PropertyList.Item label="Lifecyklus" value="A" /> <PropertyList.Item label="Status" value="20" /> <PropertyList.Item label="Auto-oprettet" value="Nej" /> <PropertyList.Item label="Vareansvarlig" value="LUI" /></PropertyList>Striped
Section titled “Striped”- Varenummer
- 745325250
- EAN-nummer
- 4005176923197
- Leverandørnummer
- SUP-00123
- Lager (CL)
- 248
- Varenummer
- 745325250
- EAN-nummer
- 4005176923197
- Leverandørnummer
- SUP-00123
- Lager (CL)
- 248
<section class="property-list property-list-striped"> <dl class="property-list-items"> <dt class="property-list-label">Varenummer</dt> <dd class="property-list-value">745325250</dd> <dt class="property-list-label">EAN-nummer</dt> <dd class="property-list-value">4005176923197</dd> <dt class="property-list-label">Leverandørnummer</dt> <dd class="property-list-value">SUP-00123</dd> <dt class="property-list-label">Lager (CL)</dt> <dd class="property-list-value">248</dd> </dl></section><PropertyList striped> <PropertyList.Item label="Varenummer" value="745325250" /> <PropertyList.Item label="EAN-nummer" value="4005176923197" /> <PropertyList.Item label="Leverandørnummer" value="SUP-00123" /> <PropertyList.Item label="Lager (CL)" value="248" /></PropertyList>Copyable React only
Section titled “Copyable ”- Varenummer
- 745325250
- EAN-nummer
- 4005176923197
- Leverandørnummer
- SUP-00123
<PropertyList> <PropertyList.Item label="Varenummer" value="745325250" copyable /> <PropertyList.Item label="EAN-nummer" value="4005176923197" copyable /> <PropertyList.Item label="Leverandørnummer" value="SUP-00123" copyable /></PropertyList>Numeric column
Section titled “Numeric column”- Lager (CL)
- 248
- Indkøbspris
- 42,50 kr
- Vejl. udsalgspris
- 129,00 kr
- Lager (CL)
- 248
- Indkøbspris
- 42,50 kr
- Vejl. udsalgspris
- 129,00 kr
<section class="property-list"> <dl class="property-list-items"> <dt class="property-list-label">Lager (CL)</dt> <dd class="property-list-value">248</dd> <dt class="property-list-label">Indkøbspris</dt> <dd class="property-list-value property-list-value-numeric">42,50 kr</dd> <dt class="property-list-label">Vejl. udsalgspris</dt> <dd class="property-list-value property-list-value-numeric">129,00 kr</dd> </dl></section><PropertyList> <PropertyList.Item label="Lager (CL)" value="248" /> <PropertyList.Item label="Indkøbspris" value="42,50 kr" numeric /> <PropertyList.Item label="Vejl. udsalgspris" value="129,00 kr" numeric /></PropertyList>Empty values
Section titled “Empty values”- Leverandørnummer
- SUP-00123
- Reol
- —
- Hyldemeter
- —
- Leverandørnummer
- SUP-00123
- Reol
- —
- Hyldemeter
- —
<section class="property-list"> <dl class="property-list-items"> <dt class="property-list-label">Leverandørnummer</dt> <dd class="property-list-value">SUP-00123</dd> <dt class="property-list-label">Reol</dt> <dd class="property-list-value property-list-value-empty">—</dd> <dt class="property-list-label">Hyldemeter</dt> <dd class="property-list-value property-list-value-empty">—</dd> </dl></section><PropertyList> <PropertyList.Item label="Leverandørnummer" value="SUP-00123" /> <PropertyList.Item label="Reol" value={null} /> <PropertyList.Item label="Hyldemeter" value="" /></PropertyList>Rich value
Section titled “Rich value”- Status
- A — Active
- Leverandør
- Acme A/S
- Status
- A — Active
- Leverandør
- Acme A/S
<section class="property-list"> <dl class="property-list-items"> <dt class="property-list-label">Status</dt> <dd class="property-list-value"> <span class="badge badge-success">A — Active</span> </dd> <dt class="property-list-label">Leverandør</dt> <dd class="property-list-value"><a href="#">Acme A/S</a></dd> </dl></section><PropertyList> <PropertyList.Item label="Status" value={<Badge variant="success">A — Active</Badge>} /> <PropertyList.Item label="Leverandør" value={<a href="#">Acme A/S</a>} /></PropertyList>Compact density
Section titled “Compact density”- Lifecyklus
- A
- Status
- 20
- Auto-oprettet
- Nej
- Vareansvarlig
- LUI
- Lifecyklus
- A
- Status
- 20
- Auto-oprettet
- Nej
- Vareansvarlig
- LUI
<section class="property-list property-list-compact"> <dl class="property-list-items"> <dt class="property-list-label">Lifecyklus</dt> <dd class="property-list-value">A</dd> <dt class="property-list-label">Status</dt> <dd class="property-list-value">20</dd> <dt class="property-list-label">Auto-oprettet</dt> <dd class="property-list-value">Nej</dd> <dt class="property-list-label">Vareansvarlig</dt> <dd class="property-list-value">LUI</dd> </dl></section><PropertyList compact> <PropertyList.Item label="Lifecyklus" value="A" /> <PropertyList.Item label="Status" value="20" /> <PropertyList.Item label="Auto-oprettet" value="Nej" /> <PropertyList.Item label="Vareansvarlig" value="LUI" /></PropertyList>Composed row
Section titled “Composed row”- EAN (GTIN-13)
4005176923197
- EAN (GTIN-13)
4005176923197
<section class="property-list"> <dl class="property-list-items"> <dt class="property-list-label">EAN <small>(GTIN-13)</small></dt> <dd class="property-list-value"><code>4005176923197</code></dd> </dl></section><PropertyList> <PropertyList.Item> <PropertyList.Label> EAN <small>(GTIN-13)</small> </PropertyList.Label> <PropertyList.Value> <code>4005176923197</code> </PropertyList.Value> </PropertyList.Item></PropertyList>Reference
Section titled “Reference”| Part | Renders | Class |
|---|---|---|
PropertyList |
<section> |
property-list |
PropertyList.Item |
<dt> + <dd> pair |
property-list-label, property-list-value |
PropertyList.Label |
<dt> |
property-list-label |
PropertyList.Value |
<dd> |
property-list-value |
| Part | Prop | Type | Default |
|---|---|---|---|
PropertyList |
title |
ReactNode |
— |
PropertyList |
striped |
boolean |
false |
PropertyList |
compact |
boolean |
false |
PropertyList |
hideIfAllEmpty |
boolean |
false |
PropertyList |
classNames |
slots | — |
PropertyList.Item |
label |
ReactNode |
— |
PropertyList.Item |
value |
ReactNode |
— |
PropertyList.Item |
numeric |
boolean |
false |
PropertyList.Item |
copyable |
boolean |
false |
PropertyList.Item |
copyValue |
string |
— |
PropertyList.Item |
classNames |
slots | — |
Item with label / value is the ordinary row; passing children instead lets you compose Label and Value yourself, as a label with a tooltip or a custom value layout requires. value takes JSX, so badges, links and inline icons need no escape hatch. The list’s classNames covers title and items, an item’s covers label and copy.
A value that is null, undefined or empty renders an em-dash and marks the cell empty; rows never hide themselves, but hideIfAllEmpty collapses a section in which every value fell back to the dash. numeric right-aligns and tabularises, matching Table.Cell’s numeric.
copyable is React-only: the button writes copyValue — or the cell’s text — to the clipboard and flips to a check for about 1.2 seconds. The whole value cell is the click target, while text selection and links inside it keep working. Opt in per row. The classes ship in both bundles, so vanilla can wire its own navigator.clipboard call and toggle [data-copied].
PropertyList.Value also takes empty and copyValue when composed by hand. Plus the native attributes of each part’s element.
Vanilla
Section titled “Vanilla”| Class | Effect |
|---|---|
property-list |
Section wrapper, text-sm |
property-list-title |
text-sm bold heading with 0.5rem of space beneath |
property-list-items |
The <dl>: two-column grid, label track sized to its widest label |
property-list-label |
<dt> cell: muted, 0.75rem/0.375rem padding, 2rem min-height |
property-list-value |
<dd> cell: same metrics, 0.5rem gap, long values break rather than overflow |
property-list-striped |
Bands every second row, keeping the <dt>/<dd> pair together |
property-list-compact |
0.5rem/0.125rem padding, 1.5rem min-height |
property-list-value-numeric |
Right-aligns the value, tabular figures |
property-list-value-empty |
Marks a dash cell so property-list-hide-if-empty can count it |
property-list-hide-if-empty |
Hides the whole section when no value cell lacks -empty |
property-list-copy |
Copy button, pushed to the cell end; hidden until the row is hovered or focused |
property-list-copy-icon |
The copy glyph, hidden while [data-copied] is set |
property-list-copy-icon-copied |
The confirmation glyph, shown only while [data-copied] is set |
property-list-value-copyable |
Opts a value cell into showing its copy button |
The <dl> is the grid and <dt>/<dd> auto-flow into its two tracks, so rows need no wrapper element — which is also why the label column aligns across every row without a fixed width.
For tabular, multi-row data use a Table; for a single metric, a stat card.