Web ResponsiveComponents
Cards

Cards

Los cards son contenedores y pueden contener información muy diversa, desde la información de contacto de usuarios, hasta acciones específicas. Los cards siempre tienen que estar dentro de un panel.

Concepto

Un card puede contener diversos componentes, imágenes o texto.

Siempre va dentro de un panel y por tanto debe cumplir con la estructura predefinida de los paneles y se ha de adaptar a las columnas del grid.

Está compuesto como mínimo por un bloque principal que se adaptará al alto del contenido. Si en una misma fila hay varios cards, la altura de todos ellos se adaptará al de mayor contenido.

Ejemplo de cards que contienen información de los contactos. La card más alta define el alto del resto de cards de la misma fila.

Usos alternativos

Cuando diseñes un card, hay que añadirle a los bloques que lo componen los paddings interiores que van a llevar, para ello tienes que ver que inners usamos en la sección de medidas.

El primer ejemplo contiene tres bloques, un primer bloque con una imagen, un segundo bloque que es el principal y por tanto es el bloque que se adaptará al alto del card más grande de cada fila y un último bloque con unformación extra. Es obligatorio añadir un inner a cada bloque, excepto si se usa ima imagen como cabecera. En este caso el bloque principal tiene un inner default y el último bloque tiene un inner small.

Cada bloque extra que añadas al crear un card, tendrá que estar delimitado por un divider a sangre.

  • 10dp
  • 20dp
  • Imagen a sangre
Construcción de un card con tres bloques.
  • 10dp
  • 20dp
Contrucción de un card con dos bloques.