This component is dynamically via the inclusion of a JavaScript file and data attributes added via the footer element. For example <footer class=”asp-footer cookie-data” data-gatag=”UA-XXXXXX-XX” data-ga4tag=”G-AXAXXAXXAA”>, where data-ga4tag defines Google Analytics 4 tag Id “G-AXAXXAXXAA”
For the purposes of this demo; the HTML output has been hardcoded and to ensure it shows, no cookies are set in your browser.
{{ aspExample({ code: "<div class=\"asp-cookie-banner\" role=\"region\" aria-label=\"cookie preferences\">
<div class=\"container asp-cookie-banner__container\">
<div class=\"asp-cookie-banner__content\">
<p class=\"sr-only\">Cookie Preferences</p>
<p class=\"asp-cookie-banner__text\">We use essential cookies to make this website work and optional cookies to help us measure how it is used. <a class=\"asp-cookie-banner__link\" href=\"#\">View details about cookies</a>.</p>
</div>
<div class=\"asp-cookie-banner__actions\">
<button class=\"asp-button asp-cookie-banner__accept cookie-preference-button-accepted\" type=\"button\">I m ok with cookies</button>
<a class=\"asp-button asp-cookie-banner__manage\" href=\"#\">Manage cookies</a>
</div>
</div>
</div>", nunjucks: "", json: "", title: "", example: "", id: "6669685eb801c" }) }}
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}