DESY

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

Card

Se trata de un bloque de información que presenta de una manera visual y ordenada su contenido. Es posible componer mosaicos con varias de ellas para organizar la información y secciones de la página.

Índice de apartados de esta página

Variantes

Por lo general, están formados por un título y, opcionalmente, descripción o contenido, icono y uno o varios botones. Sus dimensiones son flexibles, pero se recomienda mantener unas proporciones similares entre cards que correspondan al mismo nivel.

Por defecto

El contenido se enmarca en un bloque rectangular con borde y esquinas redondeadas. Esta card se utiliza para mostrar distintos items o secciones en una página de contenido.

Con hover

Todo el contenedor es un mismo enlace clicable.

Para página de inicio

Es similar a la card por defecto, pero sin borde y con fondo gris. Se utiliza en páginas de inicio de sitios web que necesitan destacar determinados items.

Para menú lateral

Similar a la card para página de inico, pero en este caso dispone de una barra separadora en el borde superior. Se utiliza en la barra lateral del sitio web, para destacar información adicional al contenido principal.

Bloque de enlaces

Se compone de un título, una serie de enlaces y una barra separadora superior. No contiene márgenes laterales, bordes ni fondo. Se utiliza en páginas de inicio para destacar y enlazar a los distintos apartados del sitio web.

Bloque con imagen

Descripción

Más

Bloque con botones

Descripción

Bloque con imagen

Similar a la card para barra lateral, pero con una imagen insertada en su interior que puede colocarse en cualquiera de los 4 lados (inferior, superior, a la derecha o a la izquierda). Se utiliza para apoyar visualmente y ayudar a la identificación del contenido al que enlaza, por ejemplo, para noticias o publicaciones. En el caso de dispositivos móvil, la imagen se coloca automáticamente encima o debajo del contenido.

Bloque con botones

Similar al bloque con imagen, pero con más presencia y accesos directos a acciones concretas. Se utiliza para destacar por encima de los demás elementos una determinada función o acceso a la herramienta principal enmarcada dentro del sitio web, por ejemplo, el ingreso al área personal.

Accesibilidad

Cómo funciona

Contenedor con un caller donde se puede insertar contenido personalizado.

Qué tener en cuenta
Qué usar Dónde Función
role: img y aria-label Parámetros Nunjucks dentro de attributes, en los parámetros super, right, left y sub Describe el contenido de las imágenes para lectores de pantalla.
aria-labelledby En los botones del card Apuntan al id de sí mismos y al del título del card.
Listado <ul> con <li> En grupos de botones y listados de enlaces Jerarquiza el contenido y ayuda a la navegación con lectores de pantalla.
aria-hidden=true En el svg que apoya al título Oculta el icono a lectores de pantalla

Buenas prácticas

  • Utilizar las cards con fondo gris de manera moderada para que no ocupen un gran porcentaje del campo de visión y se pierda la predominancia del blanco, característica de DESY.
  • En el caso de incluir imagen o ilustración, asegurarse de que siga las directrices definidas o que pertenezca al repositorio correspondiente.