Índice de páginas
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
Descripción
-
Con hover
Descripción
-
Sin bordes
Descripción
-
Para página de inicio
Descripción
-
Para menú lateral
Descripción
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.
Sin bordes #
Usamos cards sin bordes ni padding para conseguir una página más limpia, sobretodo en listados de cards apiladas en anchuras pequeñas.
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 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é usar | Dónde | Función |
|---|---|---|
|
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.