Cards


Las cards son un componente de interfaz que muestra y tiene acciones relacionadas a un sólo tema. Deben ser fáciles de leer y escanear visualmente para identificar información accionable. Elementos como imágenes y botones deben estar situados de manera que quede clara la jerarquía de elementos.

info Actualización (07/03/2023): Para evitar potenciales conflictos de código con otras librerías, se recomienda reemplazar la clase .card-img dentro de los cards por la nueva clase creada para el Kit: .uc-card-img
info Actualización (21/10/2022): Por motivos de SEO se ha reemplazado la propiedad css background-image por un tag <img /> con clase .uc-card-img en todas las cards

Existen dos variables básicas de este componente: cards con enlace y cards sin enlace:

Ejemplo de card con enlace y sin enlace

Ejemplo:

Card simple

Card simple sólo texto

Ejemplo:

Card con imagen

Ejemplo:

Card con tag y botón

Ejemplo:

Cards de misma altura

Ejemplo:

Card horizontal

El kit Digital ofrece dos alternativas para una card vertical, una que aplica la clase .card-type--horizontal más una alternativa que usa la Grilla para distribuir el contenido.

Card horizontal

Ejemplo:

Card horizontal Alternativa

Ejemplo:

Card con imagen de fondo

Card con imagen de fondo

Ejemplo:

Card con cabecera y pie

Card con Cabecera y pie

Ejemplo:

Card con imagen

Card con imagen

Ejemplo:

Card anidada visible en hover

Card anidada visible en hover

Ejemplo:

Card de notificación

Card de notificación

Ejemplo: