The cookie banner component displays advisory content on what cookies are and how to manage them when using a system.  

We must display cookie banners on public-facing applications and systems to ensure we are compliant with the Information Commissioner’s Office (ICO) guidelines, from a legal and reputational perspective. 

The regulations (reg 6) state we must tell people cookies are used, explain what cookies are, and get people’s consent to store cookies on their device. 

Visual preview and HTML code

{{ aspExample({ code: "<div class=\"asp-cookie-banner\" role=\"region\" aria-label=\"cookie preferences\">
<div class=\"container asp-cookie-banner__container\">
<div class=\"asp-cookie-banner__content\">
<p class=\"sr-only\">Cookie Preferences</p>
<p class=\"asp-cookie-banner__text\">We use essential cookies to make this website work and optional cookies to help us measure how it is used. <a class=\"asp-cookie-banner__link\" href=\"#\">View details about cookies</a>.</p>
</div>
<div class=\"asp-cookie-banner__actions\">
<button class=\"asp-button asp-cookie-banner__accept cookie-preference-button-accepted\" type=\"button\">I m ok with cookies</button>
<a class=\"asp-button asp-cookie-banner__manage\" href=\"#\">Manage cookies</a>
</div>
</div>
</div>", nunjucks: "", json: "", title: "", example: "", id: "6669685eb801c" }) }}

When to use this component

A cookie banner must be used for on all public-facing applications.  

In addition to the banner, there is also a cookie preference page which allows users to set or change their preferences. 

When not to use this component

Cookie banners are not needed for systems used by internal users. For example, some internal websites are restricted to the force network, so do not need a cookie banner.  This is because the regulations only cover public use of systems.   

Examples of where we have used this component

This component is used on: 

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Not started
Documentation In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.