Modales & Capas cookielegaloverlay
Cookie Consent
Banner flotante de aviso de cookies con diseño de cristal y opciones de configuración.
Vista Previa en Vivo
We use cookies to improve your experience. Learn more
Uso
Copia y pega este código directamente en tu página de Astro:
astro
---
import { CookieConsent } from 'astro-component-kit';
---
<CookieBannerGlass>Content</CookieBannerGlass>Instalación Manual
Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/CookieConsent.astro:
astro
---
---
<div class="cookie-bar">
<div class="text">We use cookies to improve your experience. <a href="#">Learn more</a></div>
<div class="acts"><button class="opt">Options</button><button class="acc">Accept All</button></div>
</div>
<style>
.cookie-bar { position: fixed; bottom: 2rem; left: 2rem; right: 2rem; max-width: 600px; margin: 0 auto; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.text { color: #e2e8f0; font-size: 0.85rem; }
.acts { display: flex; gap: 0.75rem; }
button { padding: 0.5rem 1rem; border-radius: 8px; border: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.opt { background: transparent; color: #fff; border: 1px solid #334155; }
.acc { background: #6366f1; color: #fff; }
</style>Información Rápida
- Categoría
- Modales & Capas
- Nombre de archivo
CookieConsent.astro- Dependencias
- Ninguna — Astro nativo + CSS puro
- Etiquetas
- cookielegaloverlay