Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Cookie banner

Help users manage their personal data by telling them when you store cookies on their device. This is display at the top of the page above the page header. Its hidden by default and only shown if JavaScript is on and the user hasn't previously set their preference.

Open this example in a new tab

HTML

<div data-module="cookie-banner" role="region" aria-label="cookie banner" class="das-cookie-banner__wrap">
  <div class="das-cookie-banner">
    <div class="das-cookie-banner__wrapper govuk-width-container">
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
          <h2 class="govuk-heading-m das-cookie-banner__header">Tell us whether you accept cookies</h2>
          <p class="das-cookie-banner__message">We use <a href="/help/cookies"
              class="govuk-link govuk-link--no-visited-state">cookies to collect information</a> about how you
            use this service. We use this information to make the service work as well as possible and improve
            this service.</p>
          <div class="das-cookie-banner__buttons">
            <div class="das-cookie-banner__button-wrap das-cookie-banner__button-accept">
              <button class="govuk-button das-cookie-banner__button" type="submit" data-accept-cookies="true">Accept all
                cookies</button>
            </div>
            <div class="das-cookie-banner__button-wrap das-cookie-banner__button-settings">
              <a class="govuk-button das-cookie-banner__button" role="button" href="/help/cookies">Set cookie
                preferences</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="das-cookie-banner__confirmation govuk-width-container" tabindex="-1">
      <p class="das-cookie-banner__confirmation-message">
        You've accepted all cookies. You can <a class="govuk-link" href="/help/cookies">change your cookie
          settings</a> at any time.
      </p>
      <button class="das-cookie-banner__hide-button" data-hide-cookie-banner="true">Hide</button>
    </div>
  </div>
</div>