# SummaryList

Uma lista de chave e valor: as características de uma coisa só, para ler de uma vez e mudar o que precisar.

## Playground

```html
<dl class="feitio-summary-list"><div><dt>Nome</dt><dd>Regar as plantas</dd></div><div><dt>Quando</dt><dd>Toda terça, às 9h</dd></div><div><dt>Avisar por</dt><dd>Discord, e-mail</dd></div></dl>
```

## Quando usar

-   Para mostrar uma configuração ou os detalhes de um item: um perfil, um agendamento, os ajustes.
-   Na página de detalhe de uma coisa, junto das ações dela.

## Quando não usar

-   **Muitos itens do mesmo tipo:** Table.
-   **Para editar tudo de uma vez:** é um formulário; a lista é para ler.

## Exemplos

### Os detalhes de um lembrete

Cada linha com a chave, o valor e o "Alterar", que leva à edição só daquela linha. No mobile, os três ficam um embaixo do outro.

Mostrar código

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

## Anatomia

1.  **Chave:** o nome da característica, em negrito.
2.  **Valor:** como ela está agora.
3.  **Alterar**, opcional: edita só essa linha.

## Bons e maus padrões

Faça assim

Fuso horário

São Paulo (UTC−3)

Idioma

Português

Uma coisa só, várias características: lê-se de cima a baixo.

Não faça

Fuso horário

Idioma

São Paulo (UTC−3)

Português

Uma tabela de uma linha só: cabeçalho para um item, e não cabe no mobile.

## Como escrever

-   Chave: o nome curto, igual ao rótulo do campo que a edita.
-   Valor vazio: diga ("Não definido"), nunca em branco.
-   "Alterar" com o nome da linha escondido para o leitor de tela.

## Acessibilidade

-   É uma lista de definição (`<dl>`): o leitor de tela lê chave e valor em pares.

## Atributos

Atributo

Valores

Para quê

`class="feitio-summary-list"`

no `<dl>`

Chave, valor e alterar em colunas, com linhas finas.

`class="change"`

no `<dd>` do link

"Alterar" à direita; no mobile, embaixo.