Overlays cookielegaloverlay
Cookie Consent
Minimalist glass banner for privacy and cookie compliance.
Preview
We use cookies to improve your experience. Learn more
Usage
Copy the full block below to use this component with its imports.
astro
---
import { CookieConsent } from 'astro-component-kit';
---
<CookieBannerGlass>Content</CookieBannerGlass>Manual Installation
If you are not using the npm package, create a new file src/components/lib/CookieConsent.astro and paste the following code:
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>Quick Info
- Category
- Overlays
- Filename
CookieConsent.astro- Dependencies
- None — pure Astro + CSS
- Tags
- cookielegaloverlay