# Card
Una card agrupa información y acciones relacionadas con un único concepto u objeto, como un documento, una causa o una persona.
```tsx
import { Card, CardHeader, CardFooter, Button } from "@fluentui/react-components";
import { DocumentText16Regular, MoreHorizontal16Regular } from "@fluentui/react-icons";
}
header="Demanda civil"
description="Actualizada hace 12 min"
action={} aria-label="Más acciones" />}
/>
Documento listo para revisión del equipo jurídico.
```
## Estructura
### Anatomía
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.
```tsx
import { Card, CardHeader, CardFooter, Button } from "@fluentui/react-components";
import { DocumentText16Regular, MoreHorizontal16Regular } from "@fluentui/react-icons";
}
header="Demanda civil"
description="Actualizada hace 12 min"
action={} aria-label="Más acciones" />}
/>
Documento listo para revisión del equipo jurídico.
```
### Un solo objeto
- 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.
## Layout
### Vertical y horizontal
Las cards verticales funcionan bien para resumen y acciones. Las horizontales sirven para listados compactos donde el objeto se escanea de izquierda a derecha.
```tsx
import { Card, CardHeader, CardFooter, Button } from "@fluentui/react-components";
// Vertical: título + contenido + acciones
} header="Demanda civil" description="Actualizada hace 12 min" />
Documento listo para revisión.
// Horizontal: listados compactos
} header="Valentina Pérez" description="Responsable del seguimiento semanal" />
```
### Tamaño
- 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.
## Comportamiento
### Interacció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.
### Selección
Las cards seleccionables funcionan como checkboxes o radios visuales. Deben comunicar estado seleccionado y sostener navegación por teclado.
```tsx
import { Card, CardHeader } from "@fluentui/react-components";
import { DocumentText16Regular } from "@fluentui/react-icons";
} header="Plan activo" description="Seleccionado" />
Incluye seguimiento de movimientos y alertas.
} header="Plan base" description="Disponible" />
Útil para consultas y revisión manual.
```
## Accesibilidad
### Nombre y descripción
- 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.
### Focus mode
- 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.
## Contenido
### Breve y accionable
- 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.