1. Government Frontend Component Guide
  2. Cookie banner

Component

Cookie banner

Help users manage their personal data by telling them when you store cookies on their device.

Setting data-hide-cookie-banner="true" on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).

If the examples below are not showing the banner, make sure the seen_cookie_message cookie is not present or is set to false.

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/cookie_banner", {
} %>

Accessibility acceptance criteria

Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • indicate when they have focus

Other examples

Custom message (preview)

<%= render "govuk_publishing_components/components/cookie_banner", {
  id: "custom-message",
  message: sanitize("GOV.UK uses cookies to make the site simpler. <a class=\"govuk-link\" href=\"/help/cookies\">Find out more about cookies</a>")
} %>