→ 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

1 month 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

1 month 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

1 month 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

1 month 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

1 month ago
Website Footer with Rich Background Design

Author:
Anonymous

3 weeks ago
Dynamic Hero Banner with Call-to-Action

Author:
Sammy Rodriguez

1 month ago
Privacy Policy Component with Accordion Sections

Author:
Anonymous

1 month ago
Modern eCommerce Footer with Multiple Sections

Author:
Alex Morgan

1 month 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

1 month ago
Privacy Policy Page Template

Author:
Anonymous

2 months ago
Responsive Footer with Social Media Links
A fully responsive footer design that adapts beautifully to all screen sizes, featuring multiple columns of content, social media links, and a newsletter signup form.

Author:
Morgan Reynolds

1 month ago

Didn't find component you were looking for?

Search from 500+ components