cookie consent banner detailed categories gdpr privacy toggles cookie consent banner categories toggles necessary analytics marketing detailed cookie banner with categories cookie consent with toggle options
Cookie Consent Banner Detailed
Fetch pattern JSON:
curl https://webspire.de/patterns/cookie-consent/banner-detailed.json banner-detailed.html
<div class="flex min-h-64 items-start justify-center p-4">
<button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg,#4f46e5)] px-5 py-2.5 text-sm font-medium text-[var(--ws-cookie-consent-action-text,#fff)] shadow transition hover:opacity-90">Show Cookie Banner</button>
<div class="ws-cookie-consent fixed inset-x-0 top-0 z-50 border-b border-[var(--ws-cookie-consent-border,#e5e5e5)] bg-[var(--ws-cookie-consent-bg,#ffffff)] px-6 py-4 shadow-lg" hidden>
<div class="mx-auto max-w-5xl">
<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
<p class="text-sm text-[var(--ws-cookie-consent-text,#1a1a1a)]">We use cookies to enhance your experience. Manage your preferences or accept all cookies.</p>
<div class="flex shrink-0 gap-3">
<button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="rounded-lg border border-[var(--ws-cookie-consent-border,#e5e5e5)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-text-soft,#666)] transition hover:opacity-80">Reject All</button>
<button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg,#4f46e5)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-action-text,#fff)] transition hover:opacity-90">Accept All</button>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-6 border-t border-[var(--ws-cookie-consent-border,#e5e5e5)] pt-4">
<div class="flex items-center gap-2">
<div class="relative inline-flex h-5 w-9 cursor-not-allowed items-center rounded-full bg-[var(--ws-cookie-consent-action-bg,#4f46e5)]">
<span class="inline-block h-3.5 w-3.5 translate-x-4 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
</div>
<span class="text-xs font-medium text-[var(--ws-cookie-consent-text,#1a1a1a)]">Necessary</span>
</div>
<div class="flex items-center gap-2">
<button type="button" role="switch" aria-checked="false" class="relative inline-flex h-5 w-9 items-center rounded-full bg-[var(--ws-cookie-consent-border,#d4d4d4)] transition">
<span class="inline-block h-3.5 w-3.5 translate-x-0.5 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
</button>
<span class="text-xs font-medium text-[var(--ws-cookie-consent-text,#1a1a1a)]">Analytics</span>
</div>
<div class="flex items-center gap-2">
<button type="button" role="switch" aria-checked="false" class="relative inline-flex h-5 w-9 items-center rounded-full bg-[var(--ws-cookie-consent-border,#d4d4d4)] transition">
<span class="inline-block h-3.5 w-3.5 translate-x-0.5 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
</button>
<span class="text-xs font-medium text-[var(--ws-cookie-consent-text,#1a1a1a)]">Marketing</span>
</div>
</div>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS
Stable Published
cookieconsentbannerdetailedcategoriesgdprprivacytoggles
Slots
| Name | Required | Description |
|---|---|---|
| message | Yes | Cookie consent message text. |
| actions | Yes | Accept All and Reject All buttons. |
| categories | Yes | Toggle switches for cookie categories (Necessary, Analytics, Marketing). |
Full-width top banner with cookie message and Accept/Reject buttons. Below: inline toggle categories (Necessary always on, Analytics and Marketing toggleable). Hidden by default with a trigger button for demonstration.