# SummaryList

A key and value list: the characteristics of a single thing, to read at once and change what is needed.

## Playground

```html
<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

```html
<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

1.  **Key:** the characteristic’s name, in bold.
2.  **Value:** how it is now.
3.  **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.