Cookie Banner

Use the cookie banner to inform users about cookies and get their consent for non-essential cookies.

Default Cookie Banner

The cookie banner appears at the bottom of the page and remains until the user makes a choice.

<div class="cookie-banner">
  <div class="cookie-banner-content">
    <h2 class="cookie-banner-heading">Cookies on this service</h3>
    <p class="cookie-banner-text">
      We use some essential cookies to make this service work...
    </p>
    <div class="cookie-banner-buttons">
      <button class="btn btn-primary">Accept analytics cookies</button>
      <button class="btn btn-secondary">Reject analytics cookies</button>
      <a href="#" class="btn btn-tertiary">View cookies</a>
    </div>
  </div>
</div>

Confirmation Message

After the user makes a choice, show a confirmation message.

<div class="cookie-banner">
  <div class="cookie-banner-content">
    <p class="cookie-banner-text">
      You've accepted analytics cookies. You can <a href="#">change your cookie settings</a> at any time.
    </p>
    <div class="cookie-banner-buttons">
      <button class="btn btn-secondary">Hide this message</button>
    </div>
  </div>
</div>

Rejected Cookies Confirmation

<p class="cookie-banner-text">
  You've rejected analytics cookies...
</p>

When to Use

Use a cookie banner when:

• Your service uses non-essential cookies
• You need to comply with GDPR or similar regulations
• Users need to consent to analytics or marketing cookies

You may not need a cookie banner if:

• You only use strictly necessary cookies
• All cookies are essential for the service to function

Usage Guidelines

Do

• Be clear about what cookies you use and why
• Give users a genuine choice
• Remember the user's choice for future visits
• Provide a link to full cookie information
• Allow users to change their preferences later

Don't

• Don't use dark patterns to encourage acceptance
• Don't make "Accept" more prominent than "Reject"
• Don't track users before they consent
• Don't make the banner difficult to dismiss

Cookie Types

Essential cookies

Required for the service to work. Don't need consent.

Analytics cookies

Help understand how users interact with the service. Need consent.

Marketing cookies

Used for advertising. Need explicit consent.

Accessibility

• The banner should be announced by screen readers
• Buttons must be keyboard accessible
• Focus should move to the banner when it appears
• Consider position: sticky vs fixed for scrolling

CSS Classes

/* Container */
.cookie-banner { }
.cookie-banner-content { }

/* Content */
.cookie-banner-heading { }
.cookie-banner-text { }

/* Buttons */
.cookie-banner-buttons { }