This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Cookie banner

Cookie banner

Open this example in a new tab: cookie banner

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: cookie banner accepted confirmation banner

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: cookie banner rejected confirmation banner

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: cookie banner client-side implementation

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: cookie banner with html

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"
        }
      ]
    }
  ]
}) }}