Item List

El Item list es una fila de lista con un elemento inicial opcional, un título con texto de soporte y un espacio final para un dato breve o una acción. Se apila para formar listas de resultados, documentos, solicitudes o notificaciones.

Propiedades y configuraciones

Cuando usarlo

Úsalo para listas de elementos del mismo tipo que se recorren de arriba abajo: documentos emitidos, solicitudes en curso, notificaciones, resultados de búsqueda o personas asociadas a un trámite. Cada ítem muestra lo justo para reconocerlo y, si corresponde, lleva a su detalle.

Si los elementos deben compararse en varias columnas de datos, usa Table. Si cada elemento necesita más contenido visual o varias acciones, usa Card.

Buenas prácticas

Recomendado: Haz que todo el ítem lleve al detalle

Si cada fila abre su detalle, usa la variante interactiva con chevron: toda la superficie es el objetivo del clic.

Recomendado: Pon el dato clave en el texto de soporte

El título identifica el elemento y el texto de soporte entrega lo que la persona busca: estado, vigencia o próximo paso.

Recomendado: Usa la meta para un dato breve y comparable

La meta de la derecha muestra un valor corto, como la fecha, con el mismo formato en toda la lista.

Recomendado: Usa la variante Select para acciones sobre varios elementos

Ítems seleccionables con checkbox y una acción visible que indica cuántos elementos se verán afectados.

Malas prácticas

No recomendado: No mezcles tratamientos del elemento inicial

Ícono, iniciales y nada en la misma lista desalinean los títulos y sugieren diferencias que no existen.

No recomendado: No la uses para datos con muchas columnas

Amontonar RUT, monto, fecha y estado en el texto de soporte impide comparar filas. Esos datos van en una Table.

No recomendado: No escribas descripciones largas

El texto de soporte es una línea breve. Los párrafos alargan cada fila y hacen la lista difícil de recorrer.

Recomendaciones de accesibilidad

Usa una lista semántica
Agrupa los ítems en <ul> / <li> para que el lector de pantalla anuncie cuántos elementos hay y permita saltar entre ellos.

Da un nombre claro al ítem interactivo
En el <a class="cl-item-list--interactive"> el título y el texto de soporte forman el nombre accesible. Mantenlos breves y significativos; evita títulos repetidos como “Ver”.

Trata el ícono final como decorativo o conviértelo en botón
El __action del kit es un ícono con aria-hidden="true". Si debe ejecutar una acción, usa un <button> con nombre propio fuera de un ítem interactivo.

Conserva el nombre del checkbox en la variante Select
El checkbox mantiene su <label class="cl-checkbox"> con texto oculto solo visualmente (“Seleccionar Certificado de residencia”). No lo borres ni lo reemplaces por un texto genérico.

Sincroniza aria-selected con el checkbox
El ítem expone aria-selected; actualízalo cada vez que cambie el checkbox para que el estado anunciado coincida con el visual.

Oculta las iniciales y las imágenes decorativas
Las iniciales van con aria-hidden="true" y la imagen con alt="" cuando el nombre ya está en el título, para no duplicar el anuncio.