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.
.card-img
dentro de los cards por la nueva clase creada para el Kit:
.uc-card-imgbackground-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:
Card simple
Ejemplo:
Ejemplo:
Ejemplo:
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.
Ejemplo:
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: