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
• Variantes
• Accesibilidad

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 junto al título: Opcionalmente, se puede incluir un icono que apoye visualmente el contenido de cada enlace.
• Icono derecha: Icono situado a la derecha que también sirve como botón de enlace. Según la variable puede ser una flecha, un chevron o un SVG personalizado.

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.