Card
La Card es el contenedor principal para agrupar contenido relacionado.
Tarjeta Interactiva
Crear Proyecto
Despliega tu nuevo proyecto en un segundo.
El contenido principal de la tarjeta va aquí, puedes poner imágenes, formularios o texto.
<Card class="w-[350px]">
<CardHeader>
<CardTitle>Crear Proyecto</CardTitle>
<CardDescription>Despliega tu nuevo proyecto en un segundo.</CardDescription>
</CardHeader>
<CardContent>
<p>El contenido principal de la tarjeta va aquí.</p>
</CardContent>
<CardFooter class="flex justify-between">
<Button variant="secondary">Cancelar</Button>
<Button>Crear</Button>
</CardFooter>
</Card>Composición Polimórfica
Todos los subcomponentes de la Card (Header, Title, etc.) aceptan la prop as. Esto permite, por ejemplo, que un CardTitle sea semánticamente un h2 pero visualmente mantenga el estilo de la librería.
Card como Section
Sección de Título
Esta tarjeta usa una etiqueta section y el título es un h2.
<Card as="section">
<CardHeader>
<CardTitle as="h2">Sección de Título</CardTitle>
</CardHeader>
</Card>