Components

Cookie banner

Allow users to accept or reject cookies which are not essential to making your service work.

Use this component if your service sets any cookies on a user’s device.

Open this cookie banner example in a new tab

Cookies on [name of service]

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.

View cookies
HTML 
<div
  class="govuk-cookie-banner"
  data-nosnippet
  role="region"
  aria-label="Cookies on [name of service]"
>
  <div class="govuk-cookie-banner__message govuk-width-container">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h2 class="govuk-cookie-banner__heading govuk-heading-m">
          Cookies on [name of service]
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">
            We use some essential cookies to make this service work.
          </p>
          <p class="govuk-body">
            We’d also like to use analytics cookies so we can understand how you
            use the service and make improvements.
          </p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button
        value="accept"
        type="button"
        name="cookies"
        class="govuk-button"
        data-module="govuk-button"
      >
        Accept analytics cookies
      </button>
      <button
        value="reject"
        type="button"
        name="cookies"
        class="govuk-button"
        data-module="govuk-button"
      >
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="#">View cookies</a>
    </div>
  </div>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
ariaLabel string

The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to "Cookie banner".
hidden boolean

Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
classes string

The additional classes that you want to add to the cookie banner.
attributes object

The additional attributes that you want to add to the cookie banner. For example, data attributes.
messages array Required.

The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.

See messages.
Options for messages
Name Type Description
headingText string

The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
headingHtml string

The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
text string Required.

The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
html string Required.

The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
actions array

The buttons and links that you want to display in the message. actions defaults to "button" unless you set href, which renders the action as a link.

See actions.
hidden boolean

Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
role string

Set role to "alert" on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
classes string

The additional classes that you want to add to the message.
attributes object

The additional attributes that you want to add to the message. For example, data attributes.
Options for actions
Name Type Description
text string Required.

The button or link text.
type string

The type of button – "button" or "submit". If href is provided, set type to "button" render a link styled as a button.
href string

The href for a link. Set type to "button" and set href to render a link styled as a button.
name string

The name attribute for the button. Does not apply if you set href, which makes a link.
value string

The value attribute for the button. Does not apply if you set href, which makes a link.
classes string

The additional classes that you want to add to the button or link.
attributes object

The additional attributes that you want to add to the button or link. For example, data attributes.

 
{%- from "moduk/components/cookie-banner/macro.njk" import modukCookieBanner -%}

{% set html %}
  <p class="govuk-body">We use some essential cookies to make this service work.</p>
  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
{% endset -%}

{{ modukCookieBanner({
  ariaLabel: "Cookies on [name of service]",
  messages: [
    {
      headingText: "Cookies on [name of service]",
      html: html,
      actions: [
        {
          text: "Accept analytics cookies",
          type: "button",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "button",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookies",
          href: "#"
        }
      ]
    }
  ]
}) -}}

See GOV.UK cookie banner component guidance for:

  • when to use this component
  • when not to use it

How it works

See GOV.UK cookies banner component guidance for detail on how this component works.

When the user has accepted cookies

Open this cookie banner example in a new tab

You’ve accepted analytics cookies. You can change your cookie settings at any time.

HTML 
<div
  class="govuk-cookie-banner"
  data-nosnippet
  role="region"
  aria-label="Cookies on the Defence Service Manual"
>
  <div class="govuk-cookie-banner__message govuk-width-container" hidden>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h2 class="govuk-cookie-banner__heading govuk-heading-m">
          Cookies on the Defence Service Manual
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">
            We use some essential cookies to make this service work.
          </p>
          <p class="govuk-body">
            We’d also like to use analytics cookies so we can understand how you
            use the service and make improvements.
          </p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button
        value="accept"
        type="button"
        name="cookies"
        class="govuk-button"
        data-module="govuk-button"
      >
        Accept analytics cookies
      </button>
      <button
        value="reject"
        type="button"
        name="cookies"
        class="govuk-button"
        data-module="govuk-button"
      >
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="#">View cookies</a>
    </div>
  </div>
  <div class="govuk-cookie-banner__message govuk-width-container">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">
            You’ve accepted analytics cookies. You can
            <a class="govuk-link" href="#">change your cookie settings</a> at
            any time.
          </p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button type="button" class="govuk-button" data-module="govuk-button">
        Hide cookie message
      </button>
    </div>
  </div>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
ariaLabel string

The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to "Cookie banner".
hidden boolean

Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
classes string

The additional classes that you want to add to the cookie banner.
attributes object

The additional attributes that you want to add to the cookie banner. For example, data attributes.
messages array Required.

The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.

See messages.
Options for messages
Name Type Description
headingText string

The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
headingHtml string

The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
text string Required.

The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
html string Required.

The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
actions array

The buttons and links that you want to display in the message. actions defaults to "button" unless you set href, which renders the action as a link.

See actions.
hidden boolean

Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
role string

Set role to "alert" on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
classes string

The additional classes that you want to add to the message.
attributes object

The additional attributes that you want to add to the message. For example, data attributes.
Options for actions
Name Type Description
text string Required.

The button or link text.
type string

The type of button – "button" or "submit". If href is provided, set type to "button" render a link styled as a button.
href string

The href for a link. Set type to "button" and set href to render a link styled as a button.
name string

The name attribute for the button. Does not apply if you set href, which makes a link.
value string

The value attribute for the button. Does not apply if you set href, which makes a link.
classes string

The additional classes that you want to add to the button or link.
attributes object

The additional attributes that you want to add to the button or link. For example, data attributes.

 
{%- from "moduk/components/cookie-banner/macro.njk" import modukCookieBanner -%}

{% set html %}
  <p class="govuk-body">We use some essential cookies to make this service work.</p>
  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
{% endset -%}

{%- set acceptHtml %}
  <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
{% endset -%}

{{ modukCookieBanner({
  ariaLabel: "Cookies on the Defence Service Manual",
  messages: [
    {
      headingText: "Cookies on the Defence Service Manual",
      html: html,
      hidden: true,
      actions: [
        {
          text: "Accept analytics cookies",
          type: "button",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "button",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookies",
          href: "#"
        }
      ]
    },
    {
      html: acceptHtml,
      actions: [
       {
          text: "Hide cookie message"
        }
      ]
    }
  ]
}) -}}

When the user has rejected cookies

Open this cookie banner example in a new tab

You’ve rejected analytics cookies. You can change your cookie settings at any time.

HTML 
<div
  class="govuk-cookie-banner"
  data-nosnippet
  role="region"
  aria-label="Cookies on the Defence Service Manual"
>
  <div class="govuk-cookie-banner__message govuk-width-container" hidden>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h2 class="govuk-cookie-banner__heading govuk-heading-m">
          Cookies on the Defence Service Manual
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">
            We use some essential cookies to make this service work.
          </p>
          <p class="govuk-body">
            We’d also like to use analytics cookies so we can understand how you
            use the service and make improvements.
          </p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button
        value="accept"
        type="button"
        name="cookies"
        class="govuk-button"
        data-module="govuk-button"
      >
        Accept analytics cookies
      </button>
      <button
        value="reject"
        type="button"
        name="cookies"
        class="govuk-button"
        data-module="govuk-button"
      >
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="#">View cookies</a>
    </div>
  </div>
  <div class="govuk-cookie-banner__message govuk-width-container">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">
            You’ve rejected analytics cookies. You can
            <a class="govuk-link" href="#">change your cookie settings</a> at
            any time.
          </p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button type="button" class="govuk-button" data-module="govuk-button">
        Hide cookie message
      </button>
    </div>
  </div>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
ariaLabel string

The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to "Cookie banner".
hidden boolean

Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
classes string

The additional classes that you want to add to the cookie banner.
attributes object

The additional attributes that you want to add to the cookie banner. For example, data attributes.
messages array Required.

The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.

See messages.
Options for messages
Name Type Description
headingText string

The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
headingHtml string

The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
text string Required.

The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
html string Required.

The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
actions array

The buttons and links that you want to display in the message. actions defaults to "button" unless you set href, which renders the action as a link.

See actions.
hidden boolean

Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
role string

Set role to "alert" on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
classes string

The additional classes that you want to add to the message.
attributes object

The additional attributes that you want to add to the message. For example, data attributes.
Options for actions
Name Type Description
text string Required.

The button or link text.
type string

The type of button – "button" or "submit". If href is provided, set type to "button" render a link styled as a button.
href string

The href for a link. Set type to "button" and set href to render a link styled as a button.
name string

The name attribute for the button. Does not apply if you set href, which makes a link.
value string

The value attribute for the button. Does not apply if you set href, which makes a link.
classes string

The additional classes that you want to add to the button or link.
attributes object

The additional attributes that you want to add to the button or link. For example, data attributes.

 
{%- from "moduk/components/cookie-banner/macro.njk" import modukCookieBanner -%}

{%- set html %}
  <p class="govuk-body">We use some essential cookies to make this service work.</p>
  <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
{% endset -%}

{% set rejectHtml %}
   <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
{% endset -%}

{{ modukCookieBanner({
  ariaLabel: "Cookies on the Defence Service Manual",
  messages: [
    {
      headingText: "Cookies on the Defence Service Manual",
      html: html,
      hidden: true,
      actions: [
        {
          text: "Accept analytics cookies",
          type: "button",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "button",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookies",
          href: "#"
        }
      ]
    },
    {
      html: rejectHtml,
      actions: [
       {
          text: "Hide cookie message"
        }
      ]
    }
  ]
}) -}}

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.