SummaryList

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

En esta página

Playground

Nombre: Regar las plantas
Cuándo: Cada martes, a las 9
Avisar por: Discord, e-mail

Cambiar

Fondo

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

Nombre: Regar las plantas; Cambiar
Cuando: Todos los martes, 9 de la mañana; Cambiar
Notificar mediante: Discord, correo electrónico; Cambiar

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

Cuando: Todos los martes, 9 de la mañana; Cambiar

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

Hacer y no hacer

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.

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.