Componentes de Didactika

Lista de descripción

Los datos de una cosa como una etiqueta y un valor en cada línea: un curso, un usuario, una regla.

Cuando una pantalla muestra los atributos de una cosa (no una lista de cosas), una tabla con cabecera es la forma equivocada. Una lista de descripción pone cada etiqueta en una columna y cada valor a su lado, así el ojo recorre los valores.

Cuándo usarla

Úsala

Para los detalles de un objeto: un curso, un usuario, una regla.
Etiquetas cortas, en el mismo orden que el formulario que crea el objeto.
Pon una insignia para un estado y un enlace para lo que tiene su propia página.

No

Usarla para varios objetos: eso es una tabla.
Mezclar etiquetas y valores en un párrafo.
Dejar una etiqueta sin valor: escribe “Ninguno”.

Anatomía

Un dl (dd-dl) con pares de término (dt, en un color atenuado) y descripción (dd, en el color del texto), separados por una línea fina. En una pantalla estrecha, o con dd-dl-stacked, la etiqueta va sobre su valor.

Variantes y estados

Dos disposiciones de una lista de descripción

Course: Algebra I
Category: Mathematics
Teacher: Ana Ruiz
Students: 128 enrolled · 74% completed
Dates: 12 September to 30 June
Status: Open

Course ID: ALG-1-2026
Summary: Equations, functions and the basics of graphs, in 12 weekly units.

Combinaciones

Combinación	Para qué usarla
Lista de descripción × tarjeta	Los detalles de un objeto dentro de una tarjeta, junto a las acciones que le corresponden.
Lista de descripción × insignia	Un estado en el valor.
Apilada × panel lateral	Una columna estrecha de detalles junto al contenido principal.

Qué añade Didactika y por qué

Qué aporta	Por qué ayuda
Etiquetas en una columna compartida	Los valores empiezan en el mismo punto, así se comparan sin esfuerzo.
Disposición apilada en pantalla estrecha	Nada se corta ni se aprieta en un teléfono.

Clases

Clase	Qué hace
`dd-dl`	La lista, en dos columnas
`dd-dl-stacked`	La etiqueta sobre su valor

Accesibilidad

Es una lista de descripción de verdad (dl, dt, dd), que las tecnologías de apoyo anuncian por pares.
No pongas contenido de bloque dentro de un dt.