Cookie Consent Floating

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

floating.html

<div class="flex min-h-64 items-end justify-start p-4">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-cookie-consent-action-text)] shadow transition hover:opacity-90">Show Cookie Notice</button>
  <div class="ws-cookie-consent fixed bottom-4 left-4 z-50 w-full max-w-sm rounded-2xl border border-[var(--ws-cookie-consent-border, rgba(0,0,0,0.1))] bg-[var(--ws-cookie-consent-bg)] p-5 shadow-xl" hidden>
    <div class="flex items-start gap-3">
      <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-cookie-consent-action-bg)] text-[var(--ws-cookie-consent-action-text)]">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87c1.355 0 2.697.055 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75l-1.5.75a3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0L3 16.5m15-3.38a48.474 48.474 0 00-6-.37c-2.032 0-4.034.126-6 .37m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 013 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 016 13.12M12.265 3.11a.375.375 0 11-.53 0L12 2.845l.265.265zm-3 0a.375.375 0 11-.53 0L9 2.845l.265.265zm6 0a.375.375 0 11-.53 0L15 2.845l.265.265z"/></svg>
      </div>
      <div>
        <p class="text-sm font-medium text-[var(--ws-cookie-consent-text)]">We use cookies</p>
        <p class="mt-1 text-xs leading-relaxed text-[var(--ws-cookie-consent-text-soft)]">We use cookies to improve your experience and analyze site traffic.</p>
      </div>
    </div>
    <div class="mt-4 flex gap-2">
      <button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="flex-1 rounded-lg bg-[var(--ws-cookie-consent-action-bg)] px-3 py-2 text-xs font-medium text-[var(--ws-cookie-consent-action-text)] transition hover:opacity-90">Accept</button>
      <button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="flex-1 rounded-lg border border-[var(--ws-cookie-consent-border, rgba(0,0,0,0.15))] px-3 py-2 text-xs font-medium text-[var(--ws-cookie-consent-text-soft)] transition hover:opacity-80">Manage</button>
    </div>
  </div>
</div>

Details

Family

cookie-consent

Tier

enhanced

Kind

component

Extends

cookie-consent/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS

Stable Published

cookieconsentfloatingcompactgdprprivacy

Slots

Name	Required	Description
icon	No	Cookie icon in accent-colored container.
message	Yes	Short cookie notice title and description text.
actions	Yes	Accept and Manage action buttons.

Compact floating cookie consent card fixed to the bottom-left corner. Features a cookie icon, short title and description, and two action buttons (Accept, Manage). Hidden by default with a trigger button for demonstration.