Our Insights About Modern Technology

Cards

Las Cards son contenedores que agrupan información relacionada dentro de una superficie delimitada. Permiten organizar contenido de manera clara, modular y jerárquica.

Card general (Base)

La card base establece los lineamientos visuales estándar del sistema. Su objetivo es contener información relacionada manteniendo separación visual respecto al fondo.

Variaciones de card

Las variaciones se definen de dos formas mediante una línea superior (top border) que comunica estado o intención semántica y mediante el cambio de color de background que nos ayuda a resaltar mejor la información, estas son las llamadas Jumbotron.

Tipo estado

Tipo Jumbotron

Uso recomendado:

  • Mensajes informativos importantes.
  • Introducción de sección.
  • Datos de vehículos o persona relevantes en los trámites.
  • Información clave que requiere mayor presencia visual.

Consideraciones

  • La línea superior funciona como indicador visual de estado.
  • No reemplaza alertas; únicamente refuerza jerarquía o contexto.
  • Se mantiene el border general y el radio de 4px en todas las variaciones.
  • La versión Jumbotron no comunica estado, comunica énfasis o relevancia.
  • No combinar línea superior de estado con la versión Jumbotron.

Contenido de las cards

Las cards pueden contener diferentes tipos de contenido, tales como:

  • Títulos
  • Subtítulos
  • Texto descriptivo
  • Iconos
  • Acciones (botones o links)
  • Listados
  • Formularios
  • Indicadores de estado

Card sobre Card

Cuando una card se coloca dentro de otra (nested cards):

Usos correctos e incorrectos de cards

Mantener siempre el border de 1px y el border-radius de 4px.

Modificar el radio, eliminar el border o aplicar estilos no documentados.

 

Utilizar la línea superior (Primary, Success, Danger) cuando comunique estado o categoría.

Usar la línea superior como elemento decorativo sin significado.

 

Dividir contenido extenso en múltiples cards si es necesario.

Saturar una sola card con demasiada información o múltiples acciones primarias.

 

Mantener alineación con la grid (12 columnas desktop / 4 responsive).

Romper la alineación del layout o usar anchos inconsistentes.

En card sobre card, conservar los bordes y diferenciar con spacing.

Eliminar bordes internos para “simplificar” o perder jerarquía visual.

Cards - PreviousButtonNext - CardsProgress bar