Cookie banner
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.
<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="button button--start asp-cookie-banner__accept cookie-preference-button-accepted" type="button">I m ok with cookies</button>
<a class="button button--start asp-cookie-banner__manage" href="#">Manage cookies</a>
</div>
</div>
</div>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.
| Development criteria | Status |
|---|---|
| WCAG 2.2 compliant | Not started |
| WCAG 2.1 compliant | Completed |
| HTML / Nunjucks version | In Progress |
| Figma version | Not started |
| M365 versions | Not started |
| Documentation | In progress |
Published 12 June 2024
Last updated 6 August 2024