Card

Agrupa contenido relacionado en una superficie con borde. Partes: encabezado, cuerpo y pie.

Preview principal

CARDheader · body · footer

María Domínguez

Product Designer

Activa

Responsable de la identidad visual y de los componentes del sistema de diseño.

Ver perfil

Composición típica: CardHeader + CardBody + CardFooter.

Variantes

outline (default) · filled · interactive.

Outline

Borde y fondo base.

Tarjeta estándar con borde definido.

Filled

Fondo ligeramente teñido.

Destaca sutilmente del fondo de la página.

Interactive

Hover y foco visibles.

Para tarjetas clickables. Usa un control accesible dentro o en el contenedor.

Con avatar

Layout libre dentro de CardBody.

LF

Lucía Fernández

lucia@devsoftec.dev

Métrica

KPI con badge de tendencia en el footer.

Proyectos activos

Últimos 30 días

1.284

+12%vs. mes anterior

Variantes

Variante	Descripción
outline	Borde y fondo base (default)
filled	Fondo ligeramente teñido
interactive	Hover / foco — pensada para click

Partes

Parte	Uso
Card	Contenedor raíz
CardHeader	Título, descripción y acción
CardBody	Contenido principal
CardFooter	Acciones o pie

Uso

import { Card, CardHeader, CardBody, CardFooter, Button } from "devsoftec-ui";

<Card variant="interactive">
  <CardHeader title="María Domínguez" description="Product Designer" />
  <CardBody>Contenido de la tarjeta.</CardBody>
  <CardFooter>
    <Button variant="secondary">Ver perfil</Button>
  </CardFooter>
</Card>

Accesibilidad

• Usa CardHeader con title semántico (h3).
• Si es clickable (interactive), añade onClick y un control accesible; el contenedor expone :focus-visible.