→ Mert Yılmaz
→ User-Friendly Cookie Notification Card w...

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.

This Example is contributed by Mert Yılmaz, on 17-Mar-2025. It is responsive. similar terms for this example are popup,dialog

Modal Cookie consent GDPR Privacy

Author Mert Yılmaz

Fork Fullscreen

<div class="cookie-consent" id="cookieConsent">
  <div class="cookie-content">
    <div class="cookie-header">
      <h3>Cookie Settings</h3>
      <button class="close-btn" id="closeConsent">&times;</button>
    </div>
    <div class="cookie-body">
      <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p>
      
      <div class="cookie-options">
        <div class="cookie-option">
          <input type="checkbox" id="essential" checked disabled>
          <div>
            <label for="essential">Essential</label>
            <span>Required for the website to function properly. Cannot be disabled.</span>
          </div>
        </div>
        
        <div class="cookie-option">
          <input type="checkbox" id="analytics">
          <div>
            <label for="analytics">Analytics</label>
            <span>Help us improve our website by collecting anonymous usage data.</span>
          </div>
        </div>
        
        <div class="cookie-option">
          <input type="checkbox" id="marketing">
          <div>
            <label for="marketing">Marketing</label>
            <span>Allow us to provide personalized ads on other platforms.</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="cookie-footer">
      <button class="cookie-btn secondary" id="declineAll">Decline All</button>
      <button class="cookie-btn primary" id="acceptSelected">Save Preferences</button>
      <button class="cookie-btn primary" id="acceptAll">Accept All</button>
    </div>
  </div>
</div>

Related Examples

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 Banner
A sleek, user-friendly cookie consent notification that helps websites comply with privacy regulations while maintaining a positive user experience.

Author:
Emily Thompson

1 month ago
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 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
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
Responsive Modal with Overlay Background Effect
A sleek modal component that dims the background content to create focus on the active dialog, with smooth transitions and responsive design.

Author:
Alex Morgan

1 month ago
Accessible Modal Dialog
Create an accessible, responsive modal dialog with a simple setup. Ideal for alerts, confirmations, and custom content.

Author:
Oliver

2 months ago
Modal Window

Author:
Anonymous

2 months ago
Customer Feedback Modal
A customizable feedback modal that helps collect user opinions about your website or service. Features rating system, text input fields, and smooth animations.

Author:
Anonymous

3 weeks ago
Contact Form with Real-time Validation

Author:
Anonymous

2 months ago
Call to Action Section

Author:
Anonymous

2 months ago
Newsletter Subscription Card

Author:
Anonymous

2 months ago

Didn't find component you were looking for?

Search from 500+ components