→ Emily Thompson
→ Cookie Consent Notification Banner

Cookie Consent Notification Banner

A sleek, user-friendly cookie consent notification that helps websites comply with privacy regulations while maintaining a positive user experience.

This Example is contributed by Emily Thompson, on 01-Mar-2025. It is responsive. similar terms for this example are Toast, Snackbar

Notification Cookie consent

Author Emily Thompson

Fork Fullscreen

<div class="cookie-consent" id="cookieConsent">
  <div class="cookie-content">
    <div class="cookie-text">
      <h3>We use cookies</h3>
      <p>This website uses cookies to ensure you get the best experience on our site. By continuing to browse, you agree to our use of cookies as described in our Cookie Policy.</p>
    </div>
    <div class="cookie-buttons">
      <button class="btn btn-customize" id="customizeBtn">Customize</button>
      <button class="btn btn-decline" id="declineBtn">Decline</button>
      <button class="btn btn-accept" id="acceptBtn">Accept All</button>
    </div>
  </div>
  <div class="cookie-settings" id="cookieSettings">
    <div class="settings-header">
      <h3>Cookie Settings</h3>
      <button class="settings-close" id="closeSettings">×</button>
    </div>
    <div class="settings-options">
      <div class="setting-item">
        <div>
          <h4>Essential Cookies</h4>
          <p>Required for basic website functionality. Cannot be disabled.</p>
        </div>
        <label class="switch">
          <input type="checkbox" checked disabled>
          <span class="slider"></span>
        </label>
      </div>
      <div class="setting-item">
        <div>
          <h4>Analytics Cookies</h4>
          <p>Help us improve our website by collecting anonymous usage data.</p>
        </div>
        <label class="switch">
          <input type="checkbox" id="analyticsCookies">
          <span class="slider"></span>
        </label>
      </div>
      <div class="setting-item">
        <div>
          <h4>Marketing Cookies</h4>
          <p>Used to track visitors across websites to display relevant advertisements.</p>
        </div>
        <label class="switch">
          <input type="checkbox" id="marketingCookies">
          <span class="slider"></span>
        </label>
      </div>
    </div>
    <div class="settings-footer">
      <button class="btn btn-save" id="saveSettings">Save preferences</button>
    </div>
  </div>
</div>

Related Examples

Cookie Preferences Banner for Websites
A non-intrusive cookie preferences banner that appears at the bottom-left corner of your website, allowing users to accept, customize, or reject cookies while maintaining GDPR compliance.

Author:
Elara

10 months ago
Cookie Consent Banner with Preference Controls
A responsive cookie policy alert that notifies users about tracking technologies while providing easy options to accept, decline, or customize cookie preferences.

Author:
Sushil shahu

10 months ago
Sticky Cookie Consent Notification
A responsive cookie consent banner that appears at the bottom of the screen to inform users about cookie usage and obtain their consent in compliance with privacy regulations.

Author:
Sushil shahu

10 months ago
Cookie Consent Notification Bar
A lightweight cookie consent notification bar positioned at the bottom center of the screen, allowing users to accept or decline cookie usage.

Author:
Anonymous

10 months ago
User-Friendly Cookie Notification Card with Accept/Decline Controls
GDPR-compliant cookie consent modal with intuitive user controls. Perfect for websites needing to implement cookie consent in a user-friendly, non-intrusive way.

Author:
Mert Yılmaz

10 months ago
Website Footer with Rich Background Design

Author:
Anonymous

9 months ago
Dynamic Hero Banner with Call-to-Action

Author:
Sammy Rodriguez

10 months ago
Privacy Policy Component with Accordion Sections

Author:
Anonymous

10 months ago
CSS footer

Author:
Anonymous

8 months ago
Modern eCommerce Footer with Multiple Sections

Author:
Alex Morgan

10 months ago
Product Feature Showcase Cards
Clean, interactive product feature cards that highlight your product's key benefits with smooth hover animations and responsive design.

Author:
Julian Parker

10 months ago
Responsive Social Media Footer for Websites

Author:
Melissa Chen

8 months ago

Didn't find component you were looking for?

Search from 500+ components