SummaryList

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

Nesta página

Playground

Nome: Regar as plantas
Quando: Toda terça, às 9h
Avisar por: Discord, e-mail

Alterar

Fundo

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

Nome: Regar as plantas; Alterar
Quando: Toda terça, às 9h; Alterar
Avisar por: Discord, e-mail; Alterar

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

Quando: Toda terça, 9h; Alterar

Chave: o nome da característica, em negrito.
Valor: como ela está agora.
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.

É 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.