Cookie banner

<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>

            <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>

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 devices 

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.  

If there’s more than one notification banner on a page, the cookie banner should appear first. 

Change the banner to a confirmation message when users accept or reject cookies.  

<div id="cookie-confirm" class="ds_notification  ds_notification--cookie-success  ds_reversed  js-confirm-cookie-content" data-module="ds-notification">
    <div class="ds_wrapper">
        <div class="ds_notification__content">
            <div class="ds_notification__text">
                <h2 class="visually-hidden">Information</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>
</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.