Part 2

Tarjetas (Cards)

Tarjetas con efecto de glassmorphism para funciones y blogs.

Las tarjetas son el bloque de construcción fundamental del sistema de diseño de cristal (glass design).

Variantes

Admitimos múltiples estilos de tarjetas a través de la propiedad (prop) variant.

VarianteDescripciónEstilo Visual
glassCristal esmerilado estándarDesenfoque + Borde
solidFondo opacoAlto contraste
outlineSolo bordeMinimalista

Ejemplos en Vivo

Tarjeta de Cristal (Glass)

Efecto de cristal esmerilado estándar con desenfoque y un borde sutil.

Tarjeta Sólida (Solid)

Fondo opaco para alto contraste.

Tarjeta Contorno (Outline)

Estilo minimalista solo con borde.

Uso del Código

<Card variant="glass" className="p-6">
<h3>Tarjeta de Cristal (Glass Card)</h3>
<p>Esto crea un hermoso efecto de profundidad.</p>
</Card>