Lista

Este componente se utiliza para presentar una serie de contenidos de texto de manera ordenada y estructurada.

Vista Previa

Figma

Usos

Los componentes de lista se utilizan a menudo para presentar información de manera atractiva y organizada, como productos, servicios, eventos o noticias. Los componentes de lista también pueden tener interacciones, como hover o click, que permiten al usuario obtener más información o acceder a más contenido cuando se utilizan en su versión link.

Cuándo usar

Cuando tienes una gran cantidad de elementos y necesitas mostrarlos de manera organizada y fácilmente navegable.

Cuando quieres que el usuario pueda ver varios elementos a la vez sin tener que desplazarse por la pantalla.

Cuando quieres que el usuario pueda seleccionar un elementos de la lista.

Cuándo no usar

Si solo tienes unos pocos elementos, puede ser más apropiado mostrarlos con otro recurso en lugar de usar un componente List.

Si los elementos de tu lista son muy complejos y requieren mucho espacio en pantalla, puede ser más apropiado mostrarlos de otra manera, como en una página individual para cada elemento.

Si necesitas mostrar elementos que no se pueden mostrar en una lista, como gráficos o mapas, puede ser mejor usar otro tipo de componente.

Comportamiento

Tipos

Visualización del una lista de valor y descripción

Values

Bullets

Numeric

Link

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

List genera un elemento dl (lista de descripción) que tiene un significado semántico en HTML. Por esta razón, el componente de lista nunca debe usarse para mostrar, por ejemplo, datos tabulares.

Hay que tener en cuenta que Axe Devtools arrojará una advertencia falsa para este componente en particular ya que usamos Shadow DOM. Esta advertencia se puede ignorar en las pruebas.