Card

Usa CardHeader y CardFooter para ordenar título, metadatos, contenido y acciones. No todos los slots son obligatorios: la estructura responde a la jerarquía de información.

• Cada card representa una entidad o concepto individual.
• No mezcles múltiples objetos principales dentro de la misma card.
• Si la card necesita muchas secciones, acciones o estados, probablemente corresponde una vista de detalle.

Las cards verticales funcionan bien para resumen y acciones. Las horizontales sirven para listados compactos donde el objeto se escanea de izquierda a derecha.

• Define ancho o alto cuando la card vive dentro de una grilla estable.
• Permite altura automática cuando el contenido puede variar.
• Usa ancho bloque solo cuando la card representa una fila completa.
• No fuerces cards de distinto contenido a la misma altura si eso genera espacios vacíos sin función.

• Si hay varias acciones disponibles, mantenlas como botones o links dentro de la card.
• Si existe una acción obvia y única, toda la superficie puede funcionar como botón.
• No hagas clickeable toda la card si también contiene varios controles internos.
• Para selección, usa estado selectable y una señal visible como floatingAction cuando el contexto lo necesite.

Las cards seleccionables funcionan como checkboxes o radios visuales. Deben comunicar estado seleccionado y sostener navegación por teclado.

• Agrega aria-label, aria-labelledby o aria-describedby cuando la card completa es interactiva o seleccionable.
• El nombre accesible debe identificar el objeto, no describir visualmente la card.
• Cuando la card contiene acciones, el orden de foco debe seguir la lectura visual.

• Usa focusMode off cuando solo las acciones internas reciben foco.
• Usa tab-only cuando la card necesita foco propio sin atrapar al usuario.
• Usa no-tab o tab-exit solo en experiencias donde entrar a la card como grupo reduzca esfuerzo de teclado.
• Si el foco queda atrapado dentro de la card, Esc debe permitir salir.

• Muestra primero la información que la persona necesita para decidir.
• Evita párrafos largos; la card no reemplaza la vista de detalle.
• Usa títulos concretos y metadatos escaneables.
• Si el contenido no lleva a una acción o decisión, quizá no necesita card.