Cookie Consent Base

Fetch pattern JSON: curl https://webspire.de/patterns/cookie-consent/base.json

base.html

<div class="ws-cookie-consent fixed inset-x-0 bottom-0 z-50 border-t border-[var(--ws-cookie-consent-border)] bg-[var(--ws-cookie-consent-bg)] px-6 py-4">
  <div class="mx-auto flex max-w-5xl flex-col items-center justify-between gap-4 sm:flex-row">
    <p class="text-sm text-[var(--ws-cookie-consent-text-soft)]">We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept", you consent to our use of cookies.</p>
    <div class="flex shrink-0 gap-3">
      <button type="button" class="rounded-lg border border-[var(--ws-cookie-consent-border)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-text-soft)] transition hover:opacity-80">Settings</button>
      <button type="button" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-action-text)] transition hover:opacity-90">Accept</button>
    </div>
  </div>
</div>

Details

Family

cookie-consent

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

cookieconsentbannergdprprivacycookies

Slots

Name	Required	Description
message	Yes	Cookie consent message text.
actions	Yes	Accept and settings action buttons.

Fixed bottom bar cookie banner with a dark background, informative text, and two action buttons for accepting cookies or adjusting settings. Suitable as a baseline for GDPR-compliant cookie notices.