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 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 de notificación

Card de notificación

Ejemplo: