Card

Contenedor con borde sutil y sombra. Compound component: Card, CardHeader, CardTitle, CardDescription, CardContent y CardFooter, cada uno con sus propios estilos y forwardRef.

pnpm dlx nuvo-ui add card

Estructura base

Resumen de cuenta

Plan profesional · Renovación en 14 días

Proyectos activos12 / 20

Almacenamiento8.2 GB / 50 GB

Activo

<Card>
  <CardHeader>
    <CardTitle>Resumen de cuenta</CardTitle>
    <CardDescription>Plan profesional · Renovación en 14 días</CardDescription>
  </CardHeader>
  <CardContent>
    {/* Contenido */}
  </CardContent>
  <CardFooter>
    <Badge variant="success" dot>Activo</Badge>
    <Button size="sm" variant="outline">Gestionar</Button>
  </CardFooter>
</Card>

Variaciones de uso

Solo header

Sin footer

Contenido que va aquí. El CardContent tiene padding-top 0 para alinearse con el header.

Sin header — usa pt-6 en CardContent para compensar.

Sub-componentes

Prop	Tipo	Default	Descripción
Card	HTMLDivElement	—	Contenedor principal con borde y sombra
CardHeader	HTMLDivElement	—	Sección superior con padding (p-6)
CardTitle	HTMLHeadingElement	—	Título — renderiza como <h3>
CardDescription	HTMLParagraphElement	—	Descripción en color muted
CardContent	HTMLDivElement	—	Contenido principal (p-6 pt-0)
CardFooter	HTMLDivElement	—	Pie — flex row, ideal para acciones