Cookie Notice
GDPR-compliant cookie consent banner with accept, decline, and a category-level preferences panel.
Bottom bar
Appears on first visit and persists the visitor's choice to
localStorage, so it won't reappear once dismissed.
Use "Reset demo" below to simulate a first-time visitor again.
<div x-data="cookieNoticeDemo()" x-init="init()">
<div class="sc-cookie-banner sc-cookie-banner--bottom" x-show="visible && !showPreferences">
<p>We use cookies to improve your experience...</p>
<button @click="showPreferences = true">Customize</button>
<button @click="rejectAll()">Reject all</button>
<button @click="acceptAll()">Accept all</button>
</div>
<div x-show="visible && showPreferences">
<input type="checkbox" class="toggle" x-model="categories.analytics">
<input type="checkbox" class="toggle" x-model="categories.marketing">
<button @click="savePreferences()">Save preferences</button>
</div>
</div>Corner popup
Same accept / reject / customize behavior as the bottom bar, anchored to a corner instead of spanning the full width.
Re-open preferences
Once a visitor has made a choice, the banner itself disappears — but a small persistent control (commonly in the footer) should still let them change their mind later.