Card

Contenedor de superficie con subcomponentes para estructurar contenido.

---

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@imansi/ui';

---

Uso básico

<Card>
  <CardHeader>
    <CardTitle>Título de la card</CardTitle>
    <CardDescription>Descripción corta del contenido</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Contenido principal de la card.</p>
  </CardContent>
  <CardFooter>
    <Button>Acción</Button>
  </CardFooter>
</Card>

---

Estructura

Componente	Uso
Card	Contenedor principal con borde y sombra
CardHeader	Encabezado (título + descripción)
CardTitle	Título en tipografía destacada
CardDescription	Subtítulo en texto muted
CardContent	Cuerpo del contenido
CardFooter	Pie con acciones o info adicional

Todos son opcionales. Podés usar solo Card con contenido directo.

---

Solo título y contenido

<Card>
  <CardHeader>
    <CardTitle>Estadísticas</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold">1,234</p>
  </CardContent>
</Card>

---

Con acciones en el footer

<Card>
  <CardHeader>
    <CardTitle>Confirmar cambio</CardTitle>
    <CardDescription>Esta acción no se puede deshacer.</CardDescription>
  </CardHeader>
  <CardFooter className="justify-end gap-2">
    <Button variant="outline">Cancelar</Button>
    <Button variant="destructive">Confirmar</Button>
  </CardFooter>
</Card>

---

Card clickeable

<Card className="cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg">
  <CardHeader>
    <CardTitle>Documentación</CardTitle>
    <CardDescription>Aprendé a usar el ecosistema Imansi</CardDescription>
  </CardHeader>
</Card>

---

Grid de cards

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <Card>
    <CardHeader>
      <CardTitle>Card 1</CardTitle>
    </CardHeader>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Card 2</CardTitle>
    </CardHeader>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Card 3</CardTitle>
    </CardHeader>
  </Card>
</div>

---

Props

Card

Prop	Tipo	Default	Descripción
className	string	—	Clases adicionales
...props	HTMLAttributes<HTMLDivElement>	—	Todas las props nativas

Los subcomponentes (CardHeader, CardTitle, etc.) aceptan las mismas props.

---

Ejemplo completo

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button,
  Badge,
} from '@imansi/ui';

export function TarjetaPlan() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>Plan Pro</CardTitle>
          <Badge variant="success">Popular</Badge>
        </div>
        <CardDescription>Para equipos que crecen rápido</CardDescription>
      </CardHeader>

      <CardContent>
        <p className="text-3xl font-bold">
          $29
          <span className="text-sm font-normal text-muted-foreground">/mes</span>
        </p>
        <ul className="mt-4 space-y-2 text-sm">
          <li>✓ Usuarios ilimitados</li>
          <li>✓ Almacenamiento 100 GB</li>
          <li>✓ Soporte prioritario</li>
        </ul>
      </CardContent>

      <CardFooter>
        <Button className="w-full">Suscribirme</Button>
      </CardFooter>
    </Card>
  );
}