SummaryList
A key and value list: the characteristics of a single thing, to read at once and change what is needed.
On this page
Playground
- Name
- Water the plants
- When
- Every Tuesday, 9 am
- Notify by
- Discord, e-mail
Change
Background
<dl class="feitio-summary-list"><div><dt>Name</dt><dd>Water the plants</dd></div><div><dt>When</dt><dd>Every Tuesday, 9 am</dd></div><div><dt>Notify by</dt><dd>Discord, e-mail</dd></div></dl>When to use
- To show a configuration or an item’s details: a profile, a schedule, the settings.
- On a thing’s detail page, next to its actions.
When not to use
- Many items of the same kind: Table.
- To edit everything at once: that is a form; the list is for reading.
Examples
A reminder’s details
Each row with key, value and "Change", which leads to editing only that row. On mobile, all three stack.
Show code
<dl class="feitio-summary-list">
<div>
<dt>Quando</dt>
<dd>Toda terça, às 9h</dd>
<dd class="change"><a class="feitio-link" href="/lembretes/1/quando">Alterar<span class="feitio-visually-hidden"> quando</span></a></dd>
</div>
</dl>Anatomy
- Key: the characteristic’s name, in bold.
- Value: how it is now.
- Change, optional: edits only that row.
Do and don’t
Do
- Time zone
- São Paulo (UTC−3)
- Language
- Portuguese
One thing, several characteristics: read top to bottom.
Don’t
| Time zone | Language |
|---|---|
| São Paulo (UTC−3) | Portuguese |
A one-row table: a header for one item, and it does not fit on mobile.
Writing
- Key: the short name, the same as the label of the field that edits it.
- Empty value: say so ("Not set"), never blank.
- "Change" with the row’s name hidden for screen readers.
Accessibility
- It is a definition list (
<dl>): screen readers read key and value in pairs.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-summary-list" | on the <dl> | Key, value and change in columns, with hairlines. |
class="change" | on the link’s <dd> | "Change" on the right; on mobile, below. |