Skip to main content Skip to list of components
Service phase: 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. Component status
Open this example in new tab

HTML 

<section class="tna-cookie-banner tna-cookie-banner--demo" data-module="tna-cookie-banner" 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.

The name of the service that the cookie banner is for.
title string

The main title of the cookie banner.

Default value: This website uses cookies
body string

The body text of the cookie banner.

Default value: We use some essential cookies to make this service work.

We'd also like to use analytics cookies so we can understand how you use the service and make improvements.
acceptedBody string

The text to show if the user has accepts cookies.

Default value: You have accepted optional cookies. You can change your cookie settings on the [cookies page](cookiesUrl)
rejectedBody string

The text to show if the user declines cookies.

Default value: You have rejected optional cookies. You can change your cookie settings on the [cookies page](cookiesUrl)
cookiesUrl string

Required.

The URL of the cookie preferences page for the service.
preferencesSetKey string

If set, the name of the cookie used to indicate that the user has set their cookie preferences.
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",
  classes: "tna-cookie-banner--demo"
}) }}

Component status

Phase
Official (ready to use in production)

Back to top