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