Cards

Las cards son superficies que incluyen contenido y acciones sobre un único tema.

Deben ser fáciles de consumir para buscar información relevante y procesable. Los elementos, como texto e imágenes, deben colocarse en las mismas de forma que se indique claramente la jerarquía.

Variaciones y tipos

Diferenciamos entre: Basic, Media e Icon. Dentro de las cards de imagen tenemos el tamaño S y M en función de lo queramos representar.

Comportamiento

Color

  • Background
    Los fondos de las cards permiten los siguientes colores: Background 1, Semantic Highlight, Semantic Highlight Static, Semantic Highlight Static 2
  • Content
    Sobre Background 1 aplicaremos Content / 1 y sobre el resto de colores su variante, Content / Inverse. Los links deberán deberán respetar siempre este contraste aplicando su respectiva versión Inverse.

Principios

Las cards deben cumplir unos principios básicos en su comportamiento:

  • Autónoma
    Una card se puede identificar como una única unidad autónoma.
  • Independiente
    Una card puede aparecer sola, sin depender de los elementos circundantes para dar contexto.
  • Individual
    Una card no puede agruparse con otra o dividirse en múltiples cards.