Components
Cookie banner
The cookie banner component allows a user to either accept or decline the use of cookies within a service.
- Status
- Official
Contents
Contents
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 tna-!--no-focus-style" 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 tna-!--no-focus-style" 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
| 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: |
| body | string |
The body text of the cookie banner. Default value:
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: |
| rejectedBody | string |
The text to show if the user declines cookies. Default value: |
| cookiesUrl | string |
Required. The URL of the cookie preferences page for the service. |
| style | string |
The style of banner to use which can be either |
| 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"
}) }}Jinja
Important information!
{% from "components/cookie-banner/macro.html" import tnaCookieBanner %}
{{ tnaCookieBanner({
"serviceName": "my service",
"cookiesUrl": "#/cookies",
"classes": "tna-cookie-banner--demo"
}) }}