Cookie Consent
Cookie consent banners for GDPR compliance and user privacy preferences.
Basic Cookie Banner
HTML
<div
class="ss-c-cookie-banner"
style="
position: relative;
z-index: auto;
padding: 16px 24px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
"
>
<p style="margin: 0; flex: 1; min-width: min(200px, 100%)">
We use cookies to enhance your browsing experience. By
continuing to use this site, you agree to our use of cookies.
</p>
<div style="display: flex; flex-wrap: wrap; gap: 8px">
<button class="ss-c-button ss-c-button--secondary">Decline</button>
<button class="ss-c-button ss-c-button--primary">Accept All</button>
</div>
</div>Cookie Banner with Preferences
HTML
<div
class="ss-c-cookie-banner"
style="
position: relative;
z-index: auto;
display: block;
padding: 20px 24px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-lg);
"
>
<div style="margin-bottom: 16px">
<h3 style="margin: 0 0 8px">◉ Cookie Settings</h3>
<p style="margin: 0; color: var(--ss-color-text-muted);">
We use cookies to improve your experience. Customize your
preferences below.
</p>
</div>
<div
style="
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
"
>
<label style="display: flex; align-items: center; gap: 8px">
<input type="checkbox" checked disabled />
<span>Essential Cookies</span>
<small style="color: var(--ss-color-text-muted);">(Required)</small>
</label>
<label style="display: flex; align-items: center; gap: 8px">
<input type="checkbox" checked />
<span>Analytics Cookies</span>
</label>
<label style="display: flex; align-items: center; gap: 8px">
<input type="checkbox" />
<span>Marketing Cookies</span>
</label>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px">
<button class="ss-c-button ss-c-button--primary">
Save Preferences
</button>
<button class="ss-c-button ss-c-button--secondary">Accept All</button>
</div>
</div>Compact Cookie Banner
HTML
<div
class="ss-c-cookie-banner ss-c-cookie-banner--compact"
style="
position: relative;
z-index: auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 12px 24px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-lg);
"
>
<span>
◉ This site uses cookies.
<a href="#">Learn more</a>
</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px">
<button class="ss-c-button ss-c-button--small ss-c-button--secondary">
Decline
</button>
<button class="ss-c-button ss-c-button--small ss-c-button--primary">
Accept
</button>
</div>
</div>Cookie Modal
HTML
<div
class="ss-c-cookie-modal"
style="
position: relative;
z-index: auto;
display: block;
max-width: 500px;
padding: 24px;
background: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
"
>
<h3 style="margin: 0 0 16px">Privacy Preferences</h3>
<p style="margin-bottom: 20px; color: var(--ss-color-text-muted);">
We may store or retrieve information on your browser, mostly in
the form of cookies.
</p>
<div
style="
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
"
>
<div
style="
padding: 12px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-lg);
"
>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<strong>Strictly Necessary</strong>
<span class="ss-c-badge ss-c-badge--success">Always Active</span>
</div>
<small style="color: var(--ss-color-text-muted);">
Required for the website to function properly.
</small>
</div>
<div
style="
padding: 12px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-lg);
"
>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
"
>
<label for="cookie-performance"><strong>Performance Cookies</strong></label>
<input type="checkbox" id="cookie-performance" checked />
</div>
<small style="color: var(--ss-color-text-muted);">
Help us understand how visitors interact with the
website.
</small>
</div>
<div
style="
padding: 12px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-lg);
"
>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
"
>
<label for="cookie-targeting"><strong>Targeting Cookies</strong></label>
<input type="checkbox" id="cookie-targeting" />
</div>
<small style="color: var(--ss-color-text-muted);">
Used to deliver personalized advertisements.
</small>
</div>
</div>
<div style="display: flex; gap: 12px">
<button class="ss-c-button ss-c-button--secondary" style="flex: 1">
Reject All
</button>
<button class="ss-c-button ss-c-button--primary" style="flex: 1">
Accept All
</button>
</div>
</div>