Cookie Consent Banner

Notice requesting consent for cookies/tracking.

html

<div class="cookie cookie--bottom-bar" role="region" aria-label="Cookie consent">
  <p class="cookie__msg">We use cookies to improve your experience and analyse traffic.</p>
  <div class="cookie__actions">
    <button type="button" class="cookie__manage">Manage preferences</button>
    <button type="button" class="cookie__accept" style="background:#241430;">Accept all</button>
  </div>
</div>
<style>
.cookie { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1px solid #24143022; box-shadow: 0 8px 24px rgba(36,20,48,.14); }
.cookie--bottom-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 20px; border-radius: 0; }
.cookie--top-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 20px; border-radius: 0; }
.cookie--bottom-corner { position: relative; max-width: 320px; padding: 18px; border-radius: 14px; }
.cookie__msg { margin: 0 0 0; }
.cookie--bottom-corner .cookie__msg { margin-bottom: 14px; }
.cookie__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie--bottom-corner .cookie__actions { flex-wrap: wrap; }
.cookie__manage { background: transparent; border: 1.5px solid #24143033; color: #241430; padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.cookie__manage:hover, .cookie__manage:focus-visible { border-color: #241430; }
.cookie__accept { border: none; color: #FAF7F2; padding: 8px 16px; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.cookie__accept:hover, .cookie__accept:focus-visible { opacity: .9; }
</style>

tailwind

<div class="cookie-tw cookie-tw--bottom-bar font-sans text-sm text-[#241430] bg-[#FAF7F2] border border-[#24143022] shadow-lg" role="region" aria-label="Cookie consent">
  <p class="cookie-tw__msg m-0">We use cookies to improve your experience and analyse traffic.</p>
  <div class="flex gap-2 flex-shrink-0">
    <button type="button" class="bg-transparent border-[1.5px] border-[#24143033] text-[#241430] px-3.5 py-2 rounded-lg font-semibold cursor-pointer hover:border-[#241430]">Manage preferences</button>
    <button type="button" class="border-0 text-[#FAF7F2] px-4 py-2 rounded-lg font-bold cursor-pointer hover:opacity-90" style="background:#241430;">Accept all</button>
  </div>
</div>
<style>
.cookie-tw--bottom-bar, .cookie-tw--top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 20px; }
.cookie-tw--bottom-corner { max-width: 320px; padding: 18px; border-radius: 14px; }
.cookie-tw--bottom-corner .cookie-tw__msg { margin-bottom: 14px; }
.cookie-tw--bottom-corner > div { flex-wrap: wrap; }
</style>

react

export function CookieConsentBanner({
  message = "We use cookies to improve your experience and analyse traffic.",
  acceptText = "Accept all",
  position = "bottom-bar",
  accent = "#241430",
  showManage = true,
}) {
  const isBar = position === "bottom-bar" || position === "top-bar";
  const wrapStyle = isBar
    ? { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, width: "100%", padding: "14px 20px" }
    : { maxWidth: 320, padding: 18, borderRadius: 14 };
  return (
    <div role="region" aria-label="Cookie consent" style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430",
      background: "#FAF7F2", border: "1px solid #24143022", boxShadow: "0 8px 24px rgba(36,20,48,.14)", ...wrapStyle }}>
      <p style={{ margin: isBar ? 0 : "0 0 14px" }}>{message}</p>
      <div style={{ display: "flex", gap: 8, flexShrink: 0, flexWrap: isBar ? "nowrap" : "wrap" }}>
        {showManage && (
          <button type="button" style={{ background: "transparent", border: "1.5px solid #24143033", color: "#241430",
            padding: "8px 14px", borderRadius: 8, fontWeight: 600, cursor: "pointer" }}>Manage preferences</button>
        )}
        <button type="button" style={{ border: "none", color: "#FAF7F2", padding: "8px 16px", borderRadius: 8,
          fontWeight: 700, cursor: "pointer", background: accent }}>{acceptText}</button>
      </div>
    </div>
  );
}