DESY

Sistema de Diseño del Gobierno de Aragón.

Listado de enlaces

Se trata de un listado de items apilados que, dotado de protagonismo dentro de la página, enlaza a las distintas secciones del sitio o aplicación web.

Índice de apartados de esta página

Anatomía

Pueden apilarse de 3 a 7 items, y cada uno de ellos se compone de varios elementos:

  • Título del item: Enlace a la sección indicada. El estilo puede ser el que se muestra por defecto, deshabilitado, sin enlace o activo.
  • Descripción: Opcionalmente, se puede añadir un breve texto que informe al usuario de lo que se va a encontrar en su interior.
  • Icono: Opcionalmente, se puede incluir un icono que apoye visualmente el contenido de cada enlace.
  • Flecha: Icono situado a la derecha que también sirve como botón de enlace.

Variantes

Con líneas separadoras

El estilo por defecto del listado. Se utiliza para apilar de manera ordenada y sobria múltiples secciones.

Con contenedores

Rodeados por un perímetro rectangular con esquinas redondeadas, se utiliza para dotar de mayor presencia e importancia a cada uno de los items del listado cuando el número de los mismos no es muy elevado.

Con contenedores y hover

Utiliza la clase .c-link--full definida en los estilos de enlaces para que todo el contenedor sea clicable.

Accesibilidad

Cómo funciona

Rodeado con la etiqueta <nav>, debe tener un aria-label que describa el tipo de navegación.

Dentro se encuentra una lista sin orden <ul> con una serie de <li> que contienen un enlace marcado con un id único.

Si incluyes svg personalizados, asegúrate de que tienen los atributos role=presentation y aria-hidden=true.

Qué tener en cuenta
Qué usar Dónde Función
idPrefix Parámetro Nunjucks dentro del componente Permite crear id únicos para los items del listado
id Parámetro Nunjucks dentro de cada item Permite crear un id concreto para cada item.
aria-label Dentro del parámetro Nunjuks attributes Describe el tipo de navegación.
title Parametro Nunjucks dentro de attributes cuando se usa un target en el item. Anuncia que el enlace se abrirá en una nueva ventana o pestaña.