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.
.card-img
dentro de los cards por la nueva clase creada para el Kit:
.uc-card-img
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 sólo texto
Ejemplo:
Card con imagen
Ejemplo:
Card con tag y botón
Ejemplo:
Cards de misma altura
Ejemplo:
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
Ejemplo:
Card con Cabecera y pie
Ejemplo:
Card con imagen
Ejemplo:
Card anidada visible en hover
Ejemplo:
Card de notificación
Ejemplo: