Cookie banner
Allow users to accept or reject cookies that are not essential to make your website or service work.
HTML
<div id="cookie-notice" class="ds_notification ds_notification--large ds_notification--cookie js-initial-cookie-content" data-module="ds-cookie-notification">
<div class="ds_wrapper">
<div class="ds_notification__content">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
experience.</p>
<p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
<div class="ds_button-group">
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-all-cookies">Accept all cookies</button>
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-essential-cookies">Use essential cookies only</button>
<a href="/cookies/">Set cookie preferences</a>
</div>
</div>
</div>
</div>
</div>About this component
The cookie banner tells users about site cookies. It sits at the top of all site pages.
It gives users the option to accept or reject non-essential cookies.
The cookie banner is needed to meet data protection legislation including:
- Privacy and Electronic Communications Regulations (PECR)
- General Data Protection Regulation (GDPR)
PECR asks that websites:
- say what cookies will be set
- explain what the cookies will do
- get consent from users to store cookies on their device
When to use this component
Use this component if your website or service sets any cookies on a user’s device.
Cookies means:
- browser and HTTP-only cookies
- HTML5 local storage
- service workers
- any other technologies you use that store files on a user's device
How to use this component
Show the cookie banner across all pages when users access your website or service until they either:
- accept or reject cookies in the cookie banner
- save cookie preferences on your cookie settings page
You must:
- inform users about any cookies that you set on their device
- allow users to reject any cookies that are not essential
Set a cookie to remember the user’s choice for one year.
A cookie banner should not stop users accessing information or completing a task. Do not use make cookie banners ‘sticky’ or fixed.
Change the banner to a confirmation message when users accept or reject cookies.
HTML
<div id="cookie-confirm" class="ds_notification ds_reversed ds_notification--cookie-success js-confirm-cookie-content" data-module="ds-notification">
<div class="ds_wrapper">
<div class="ds_notification__content ds_notification__content--has-close">
<h2 class="visually-hidden">Cookies on this website</h2>
<div class="ds_notification__text">
<p>Your cookie preferences have been saved. You can <a href="/cookies/">change your cookie settings</a> at any time.</p>
</div>
<button class="ds_notification__close js-close-notification" type="button">
<span class="visually-hidden">Close this notification</span>
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>Place banners consistently so users can find the information in the same location across sites and services.
Use this order at the top of your page:
- Cookie banner
- Notification banner
- Site header
HTML
<div class="ds_page__top">
<div id="cookie-notice" class="ds_notification ds_notification--large ds_notification--cookie js-initial-cookie-content" data-module="ds-cookie-notification">
<div class="ds_wrapper">
<div class="ds_notification__content">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
experience.</p>
<p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
<div class="ds_button-group">
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-all-cookies">Accept all cookies</button>
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-essential-cookies">Use essential cookies only</button>
<a href="/cookies/">Set cookie preferences</a>
</div>
</div>
</div>
</div>
</div>
<div class="ds_notification ds_reversed" data-module="ds-notification">
<div class="ds_wrapper">
<div class="ds_notification__content ds_notification__content--has-close">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We need to tell you about <a href="#">something</a></p>
</div>
<button class="ds_notification__close js-close-notification" type="button">
<span class="visually-hidden">Close this notification</span>
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</button>
</div>
</div>
</div>
<header class="ds_site-header ds_site-header--gradient" role="banner">
<div class="ds_wrapper">
<div class="ds_site-header__content">
<div class="ds_site-branding">
<a class="ds_site-branding__logo ds_site-branding__link" href="/">
<img class="ds_site-branding__logo-image" src="/binaries/content/gallery/designsystem/examples/scottish-government-svg" alt="Scottish Government" />
</a>
<div class="ds_site-branding__title">
Design System
</div>
</div>
<div class="ds_site-header__controls">
<label aria-controls="mobile-navigation" class="ds_site-header__control js-toggle-menu" for="menu">
<span class="ds_site-header__control-text">Menu</span>
<svg class="ds_icon ds_site-header__control-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#menu"></use></svg>
<svg class="ds_icon ds_site-header__control-icon ds_site-header__control-icon--active-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</label>
</div>
<input class="ds_site-navigation__toggle" id="menu" type="checkbox">
<nav id="mobile-navigation" class="ds_site-navigation ds_site-navigation--mobile" data-module="ds-mobile-navigation-menu">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
<div class="ds_site-search ds_site-header__search" data-module="ds-site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="text" placeholder="Search this site" autocomplete="off">
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="ds_site-header__navigation">
<div class="ds_wrapper">
<nav class="ds_site-navigation">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="ds_phase-banner">
<div class="ds_wrapper">
<p class="ds_phase-banner__content">
<strong class="ds_tag ds_phase-banner__tag">
Alpha
</strong>
<span class="ds_phase-banner__text">
This is a new service. Your <a href="#">feedback</a> will help us to improve it.
</span>
</p>
</div>
</div>
</header>
</div>Evidence
Around 46% of all users on mygov.scot interacted with this component in the first quarter of 2025. This figure varies by content type.
We also know from surveys in 2019 and 2020 that many users do not notice cookie banners.
Following surveys and desk research, the cookie banner has been designed to:
- be non-intrusive across all devices
- allow users to reject non-essential cookies directly from the banner – only a small percentage of users will navigate to the cookie settings page
- ensure that users know that they need to accept essential cookies
- make it clear that we need the user’s consent to use cookies
- show users how cookies help them to get the most out of a site
- never use ‘dark patterns’ that trick users, for example where clicking ‘x’ accepts cookies
- give users control over cookie preferences for non-essential cookies
- use 2 secondary buttons so users are not nudged to accept one option over another
Website analytics
You can track clicks on links in the cookie banner using the data-banner data attribute. You can also record the click URL, the click text or a data attribute for button clicks against the original page path.
The Design System’s ‘tracking’ script adds the data attributes.