Cookie banner

Cookie banner

Open this example in a new tab

Code

Markup

<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookie banner">
  <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 this government service
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">We use analytics cookies to help understand how users use our service.</p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Accept analytics cookies
      </button>
      <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </div>

  </div>
</div>

Macro

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{{ govukCookieBanner({
  messages: [
    {
      headingText: "Cookies on this government service",
      text: "We use analytics cookies to help understand how users use our service.",
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    }
  ]
}) }}

Cookie banner accepted confirmation banner

Open this example in a new tab

Code

Markup

<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookie banner">
  <div class="govuk-cookie-banner__message govuk-width-container" role="alert">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">Your cookie preferences have been saved. You have accepted cookies.</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>

Macro

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{{ govukCookieBanner({
  messages: [
    {
      text: "Your cookie preferences have been saved. You have accepted cookies.",
      role: "alert",
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    }
  ]
}) }}

Cookie banner rejected confirmation banner

Open this example in a new tab

Code

Markup

<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookie banner">
  <div class="govuk-cookie-banner__message govuk-width-container" role="alert">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">Your cookie preferences have been saved. You have rejected cookies.</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>

Macro

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{{ govukCookieBanner({
  messages: [
    {
      text: "Your cookie preferences have been saved. You have rejected cookies.",
      role: "alert",
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    }
  ]
}) }}

Cookie banner client-side implementation

Open this example in a new tab

Code

Markup

<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookie banner">
  <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 this service
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">We use cookies to help understand how users use our service.</p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Accept analytics cookies
      </button>
      <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </div>

  </div>
  <div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">Your cookie preferences have been saved. You have accepted cookies.</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 class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">Your cookie preferences have been saved. You have rejected cookies.</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>

Macro

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{{ govukCookieBanner({
  messages: [
    {
      headingText: "Cookies on this service",
      text: "We use cookies to help understand how users use our service.",
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    },
    {
      text: "Your cookie preferences have been saved. You have accepted cookies.",
      role: "alert",
      hidden: true,
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    },
    {
      text: "Your cookie preferences have been saved. You have rejected cookies.",
      role: "alert",
      hidden: true,
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    }
  ]
}) }}

Cookie banner with html

Open this example in a new tab

Code

Markup

<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookie banner">
  <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 <span>my service</span>
        </h2>
        <div class="govuk-cookie-banner__content">
          <p class="govuk-body">We use cookies in <span>our service</span>.</p>
          <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>
        </div>
      </div>
    </div>

    <div class="govuk-button-group">
      <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Accept analytics cookies
      </button>
      <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </div>

  </div>
</div>

Macro

{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}

{{ govukCookieBanner({
  messages: [
    {
      headingHtml: "Cookies on <span>my service</span>",
      html:
        '<p class="govuk-body">We use cookies in <span>our service</span>.</p>\n' +
        '<p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>\n',
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    }
  ]
}) }}