→ Sushil shahu
→ Cookie Consent Banner with Preference Co...

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.

This Example is contributed by Sushil shahu, on 20-Mar-2025. It is responsive.

GDPR Consent Manager Cookie Banner

Author Sushil shahu

Fork Fullscreen

<div id="cookie-alert" class="cookie-container">
  <div class="cookie-content">
    <div class="cookie-header">
      <h3>Cookie Policy</h3>
      <button id="close-cookie" class="close-btn">×</button>
    </div>
    <p>This website uses cookies and similar technologies to enhance your browsing experience, analyze site traffic, and personalize content. By clicking "Accept All", you consent to the use of all cookies. You can manage preferences or decline non-essential cookies by clicking "Preferences".</p>
    <div class="cookie-settings" id="cookie-settings">
      <div class="cookie-option">
        <label class="toggle">
          <input type="checkbox" checked disabled>
          <span class="toggle-slider"></span>
        </label>
        <div class="cookie-option-details">
          <h4>Essential Cookies</h4>
          <p>Required for basic website functionality. Cannot be disabled.</p>
        </div>
      </div>
      <div class="cookie-option">
        <label class="toggle">
          <input type="checkbox" id="analytics-cookies" checked>
          <span class="toggle-slider"></span>
        </label>
        <div class="cookie-option-details">
          <h4>Analytics Cookies</h4>
          <p>Help us improve our website by collecting anonymous usage information.</p>
        </div>
      </div>
      <div class="cookie-option">
        <label class="toggle">
          <input type="checkbox" id="marketing-cookies" checked>
          <span class="toggle-slider"></span>
        </label>
        <div class="cookie-option-details">
          <h4>Marketing Cookies</h4>
          <p>Allow us to provide personalized ads and content based on your interests.</p>
        </div>
      </div>
    </div>
    <div class="cookie-actions">
      <button id="accept-cookies" class="btn primary-btn">Accept All</button>
      <button id="save-preferences" class="btn secondary-btn">Save Preferences</button>
      <button id="decline-cookies" class="btn tertiary-btn">Decline All</button>
      <button id="toggle-preferences" class="btn tertiary-btn">Preferences</button>
    </div>
    <div class="cookie-footer">
      <a href="#">Privacy Policy</a>
      <a href="#">Cookie Policy</a>
    </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

3 months ago
Cookie Consent Notification Banner
A sleek, user-friendly cookie consent notification that helps websites comply with privacy regulations while maintaining a positive user experience.

Author:
Emily Thompson

3 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

3 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

3 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

2 months ago
Privacy Policy Page Template

Author:
Anonymous

4 months ago
Privacy Policy Component with Accordion Sections

Author:
Anonymous

2 months ago
Footer with App Download Buttons and Branding
A professional website footer featuring app download buttons, brand logo, sitemap links, and social media connections for enhanced user engagement.

Author:
Janna Pineda

3 months ago
Responsive Social Media Footer for Websites

Author:
Melissa Chen

1 month ago
Website Privacy Policy Template
A complete privacy policy template that explains how your website collects, uses, and protects user data in compliance with privacy regulations.

Author:
Anonymous

2 months ago
CSS footer

Author:
Anonymous

1 month ago
Website Footer with Rich Background Design

Author:
Anonymous

2 months ago

Didn't find component you were looking for?

Search from 500+ components