Data list
The facts about one thing, as terms and values.
On this page
A data list sets out the facts about one thing as terms and their values: a deployment's region, commit and duration; an order's address and total. Use it on a <dl>, with a <div> around each term and value. Rows sit on hairlines, and every value starts on the same edge.
Data list
<dl class="data-list"> <div class="data-list-item"> <dt class="data-list-term">Status</dt> <dd class="data-list-value"> <span class="badge badge-success badge-dot">Ready</span> </dd> </div> <div class="data-list-item"> <dt class="data-list-term">Region</dt> <dd class="data-list-value">Tokyo (hnd1)</dd> </div> <div class="data-list-item"> <dt class="data-list-term">Framework preset</dt> <dd class="data-list-value">Astro</dd> </div> <div class="data-list-item"> <dt class="data-list-term">Commit</dt> <dd class="data-list-value"><code class="code">9f2c1a</code> Soften every edge</dd> </div> <div class="data-list-item"> <dt class="data-list-term">Duration</dt> <dd class="data-list-value">48 seconds</dd> </div></dl>#One edge for every value
The list is a two-column grid, and each row is a subgrid of it. The term column is as wide as the longest term, so the values line up on one edge however the terms differ in length, with no width to set by hand.
#It follows its container
The list is a size container. Under 20rem each term moves above its value, so a long value has the full width. Drag the handle to narrow the preview.
In a narrow column
<div class="card"> <header class="card-header"> <h3 class="card-title">Billing address</h3> </header> <dl class="data-list"> <div class="data-list-item"> <dt class="data-list-term">Company</dt> <dd class="data-list-value">Analytical Engines Ltd.</dd> </div> <div class="data-list-item"> <dt class="data-list-term">Address</dt> <dd class="data-list-value">12 St James's Square, London SW1Y 4JH</dd> </div> <div class="data-list-item"> <dt class="data-list-term">Tax number</dt> <dd class="data-list-value">GB 123 4567 89</dd> </div> </dl></div>#Data list or table
A data list describes one thing with many properties. A table compares many things by the same properties. When the terms would repeat for every row, it is a table.
#Accessibility
- A
<dl>with<dt>and<dd>announces each term with its value. The<div>around a pair is allowed in a<dl>and is what the rows are styled on. - Long values wrap anywhere, so an identifier or a URL does not push the list wider than its column.
#Classes
| Class | Description |
|---|---|
data-list | The list, on a dl: a two-column grid and a size container; under 20rem each term moves above its value |
data-list-item | A row, on a div around one term and its value; a hairline parts it from the next |
data-list-term | The term, on a dt, in muted ink |
data-list-value | The value, on a dd, in strong ink and tabular figures; long values wrap anywhere |