Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Cookie banner

Component guide

Example


<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on [name of service]">
  
  <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 [name of service]
        </h2>
        
        <div class="govuk-cookie-banner__content">
          
          <p class="govuk-body">We use some essential cookies to make this service work.</p>   <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
          
        </div>
      </div>
    </div>

    
    <div class="govuk-button-group">
    
      
      <button type="button" class="govuk-button" data-module="govuk-button">
        Accept analytics cookies
      </button>
    
      
      <button type="button" class="govuk-button" data-module="govuk-button">
        Reject analytics cookies
      </button>
    
      
      <a class="govuk-link" href="#">View cookies</a>
    
    </div>
    

  </div>
  
</div>

{{ govukCookieBanner({
  "ariaLabel": "Cookies on [name of service]",
  "messages": [
    {
      "headingText": "Cookies on [name of service]",
      "html": "<p class=\"govuk-body\">We use some essential cookies to make this service work.</p>   <p class=\"govuk-body\">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>",
      "actions": [
        {
          "text": "Accept analytics cookies",
          "type": "button"
        },
        {
          "text": "Reject analytics cookies",
          "type": "button"
        },
        {
          "text": "View cookies",
          "href": "#"
        }
      ]
    }
  ]
}) }}