Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Cookie banner

The cookie banner component allows a user to either accept or decline the use of cookies within a service.

Contents

  1. Status

The cookie banner is available as part of TNA Frontend as well as a standalone cookie banner package.

Open this example in new tab

HTML 

<section class="tna-cookie-banner tna-cookie-banner--demo" data-module="tna-cookie-banner" data-policies="" data-preferenceskey="" data-policieskey="" data-domain="" data-path="/design-system/" data-insecure="false" aria-label="Cookies on my service" hidden>
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
      <h2 class="tna-heading-m">This website uses cookies</h2>
      <p>We use some essential cookies to make this service work.</p>
      <p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="accept">
          Accept cookies
        </button>
        <button class="tna-button" type="button" value="reject">
          Reject cookies
        </button>
        <a href="#/cookies" class="tna-button tna-button--plain">
          Set cookie preferences
        </a>
      </div>
    </div>
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted" tabindex="0" hidden>
      <p>You have accepted optional cookies. You can change your cookie settings on the <a href="#/cookies">cookies page</a>.</p>
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="close">
          Hide cookies message
        </button>
      </div>
    </div>
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected" tabindex="0" hidden>
      <p>You have rejected optional cookies. You can change your cookie settings on the <a href="#/cookies">cookies page</a>.</p>
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="close">
          Hide cookies message
        </button>
      </div>
    </div>
  </div>
</section>

Nunjucks

Nunjucks options
Primary options
Name Type Description
serviceName string

Required.

title string
body string
acceptedBody string
rejectedBody string
cookiesUrl string

Required.

policies string
cookiesPreferencesSetKey string
cookiesDomain string
cookiesPath string
allowInsecure boolean
style string

The style of banner to use which can be either contrast for an inverted style, accent for a banner that matches the page’s accent colour or tint for a subtle, tinted banner.
classes string

Classes to add to the cookie banner.
attributes object

HTML attributes (for example data attributes) to add to the cookie banner.

 
{% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner %}

{{ tnaCookieBanner({
  serviceName: "my service",
  cookiesUrl: "#/cookies",
  cookiesPath: "/design-system/",
  classes: "tna-cookie-banner--demo"
}) }}

Status

Status
In development
Tested without JavaScript
In development
Tested without CSS
In development
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Back to top