# SummaryList

Una lista de clave y valor: las características de una sola cosa, para leer de una vez y cambiar lo necesario.

## Playground

```html
<dl class="feitio-summary-list"><div><dt>Nombre</dt><dd>Regar las plantas</dd></div><div><dt>Cuándo</dt><dd>Cada martes, a las 9</dd></div><div><dt>Avisar por</dt><dd>Discord, e-mail</dd></div></dl>
```

## Cuándo usarlo

-   Para mostrar una configuración o los detalles de un ítem: un perfil, un horario, las configuraciones.
-   En la página de detalles de un elemento, junto a sus acciones.

## Cuándo no usarlo

-   **Muchos elementos del mismo tipo:** Tabla.
-   **Para editar todo a la vez:** es un formulario; la lista es para leer.

## Ejemplos

### Detalles de un recordatorio

Cada fila con clave, valor y "Cambiar", que lleva a editar solo esa fila. En móvil, las tres se apilan.

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

## Anatomía

1.  **Clave:** el nombre de la característica, en negrita.
2.  **Valor:** cómo está ahora.
3.  **Cambiar**, opcional: solo edita esa fila.

## Hacer y no hacer

Do

Time zone

São Paulo (UTC−3)

Lenguaje

Portugués

Una cosa, varias características: lee de arriba hacia abajo.

Don’t

Time zone

Lenguaje

São Paulo (UTC−3)

Portugués

Una tabla de una fila: un encabezado para un elemento, y no cabe en móvil.

## Escritura

-   Clave: el nombre corto, igual que la etiqueta del campo que lo edita.
-   Valor vacío: di eso ("No establecido"), nunca en blanco.
-   "Cambiar" con el nombre de la fila oculto para lectores de pantalla.

## Accesibilidad

-   Es una lista de definición (`<dl>`): los lectores de pantalla leen clave y valor en pares.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-summary-list"`

en el `<dl>`

Clave, valor y cambio en columnas, con líneas divisorias.

`class="change"`

en el `<dd>` del enlace

"Cambiar" a la derecha; en móvil, abajo.