Card

Contenedor estructural para agrupar contenido. No es interactivo por defecto.

Contrato

  • No ejecuta acciones.
  • No navega.
  • La interactividad es un estado explícito.
  • La navegación se resuelve externamente.

Estados válidos

Card base (default)
Card interactive (comunica intención), pero no ejecuta acciones por sí mismo.
Card disabled

Variantes

Variant default
Variant muted

Density

La densidad controla el padding interno de la Card. Permite adaptar el componente a interfaces editoriales o a UI más compacta sin romper el contrato visual.

  • comfortable (default): p-4. Uso general y editorial.
  • compact: p-3. UI densa, listados o paneles.

Nota: compact no debe usarse en contenido editorial. Su propósito es reducir densidad visual en interfaces complejas.

Contenido con densidad comfortable (default)
Contenido compacto

Combinaciones inválidas

Estas combinaciones no deben usarse. El sistema las desaconseja explícitamente.

muted + interactive (inválido)

Antipatrón común

No hagas la Card navegable directamente. Envuelve la Card si necesitas navegación.

Card envuelta en enlace (correcto)