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.

Border: 1px sólido.
Border radius: 4px.
Background white.
Padding interno establecido de 16px, pero puede tener variaciones según necesidad.

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

Línea superior en color primary.

Línea superior en color success.

Línea superior en color danger.

Tipo Jumbotron

Border: 1px sólido.
Border radius: 4px.
Background: --p-surface-200 #E2E8F0

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

Aclaración importante

El contenido interno puede variar según las necesidades de cada producto.

La estructura interna debe adaptarse al caso de uso, respetando siempre:

Espaciados del sistema
Jerarquía tipográfica
Alineación dentro de la grid

Card sobre Card

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

Ambas mantienen border visible.
Ambas conservan border-radius de 4px.
Se debe respetar un espacio interno adecuado entre contenedores.
La jerarquía debe diferenciarse mediante espaciado o fondo, no eliminando bordes.

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.