Skip to main content

Work in progress

This page is a design preview. It may not contain the latest guidance and may not behave as expected.

Current guidance can always be found at design-system.dwp.gov.uk.

Analytics cookies only

HTML

<div class="govuk-!-margin-bottom-8">
  <header class="govuk-header" data-module="govuk-header">
    <div class="govuk-header__container govuk-width-container">
      <div class="govuk-header__logo">
        <a href="#" class="govuk-header__link govuk-header__link--homepage">
          <svg
            focusable="false"
            role="img"
            class="govuk-header__logotype"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 148 30"
            height="30"
            width="148"
            aria-label="GOV.UK">
            <title>GOV.UK</title>
            <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
          </svg>
        </a>
      </div>
      <div class="govuk-header__content">
        <a href="#" class="govuk-header__link govuk-header__service-name">
          Service name
        </a>
      </div>
    </div>
  </header>
</div>
<div class="govuk-width-container">
  <h1 class="govuk-heading-xl">Cookies on [service name]</h1>
  <p class="govuk-body">Cookies are small text files that we save on your phone, tablet or computer when you use this service. Some cookies on [service name] are essential and others are optional.</p>
  <p class="govuk-body">We cannot use cookies to identify you.</p>
  <h2 class="govuk-heading-l">Essential cookies</h2>
  <div class="govuk-body" id="essential_cookies_desc">
    <p>Essential cookies are needed to make the service work. If you do not want us to use them you can turn off cookies in your web browser, but the service may not work properly.</p>
    <p>We will not set any essential cookies until you start using the service.</p>
    <details class="govuk-details" data-module="essential-cookies-details">
      <summary class="govuk-details__summary">
        <span class="govuk-details__summary-text">
          Essential cookies used by this service
        </span>
      </summary>
      <div class="govuk-details__text">
        <h3 class="govuk-heading-m" id="security_cookies_desc">Security cookies</h3>
        <table class="govuk-table" aria-describedby="security_cookies_desc">
          <thead class="govuk-table__header">
            <tr>
              <th scope="col" class="govuk-table__header">Name</th>
              <th scope="col" class="govuk-table__header">Purpose</th>
              <th scope="col" class="govuk-table__header">Expires</th>
            </tr>
          </thead>
          <tbody class="govuk-table__body">
            <tr scope="row" class="govuk-table__row">
              <td class="govuk-table__cell">Cookie 1</td>
              <td class="govuk-table__cell">Plain language description of cookie purpose</td>
              <td class="govuk-table__cell">Cookie duration</td>
            </tr>
            <tr scope="row" class="govuk-table__row">
              <td class="govuk-table__cell">Cookie 2</td>
              <td class="govuk-table__cell">Plain language description of cookie purpose</td>
              <td class="govuk-table__cell">Cookie duration</td>
            </tr>
          </tbody>
        </table>
        <h3 class="govuk-heading-m" id="functional_cookies_desc">Functional cookies</h3>
        <table class="govuk-table" aria-describedby="functional_cookies_desc">
          <thead class="govuk-table__header">
            <tr>
              <th scope="col" class="govuk-table__header">Name</th>
              <th scope="col" class="govuk-table__header">Purpose</th>
              <th scope="col" class="govuk-table__header">Expires</th>
            </tr>
          </thead>
          <tbody class="govuk-table__body">
            <tr scope="row" class="govuk-table__row">
              <td class="govuk-table__cell">Cookie 1</td>
              <td class="govuk-table__cell">Plain language description of cookie purpose</td>
              <td class="govuk-table__cell">Cookie duration</td>
            </tr>
            <tr scope="row" class="govuk-table__row">
              <td class="govuk-table__cell">Cookie 2</td>
              <td class="govuk-table__cell">Plain language description of cookie purpose</td>
              <td class="govuk-table__cell">Cookie duration</td>
            </tr>
          </tbody>
        </table>
        <h3 class="govuk-heading-m" id="performance_cookies_desc">Performance cookies</h3>
        <table class="govuk-table" aria-describedby="performance_cookies_desc">
          <thead class="govuk-table__header">
            <tr>
              <th scope="col" class="govuk-table__header">Name</th>
              <th scope="col" class="govuk-table__header">Purpose</th>
              <th scope="col" class="govuk-table__header">Expires</th>
            </tr>
          </thead>
          <tbody class="govuk-table__body">
            <tr scope="row" class="govuk-table__row">
              <td class="govuk-table__cell">Cookie 1</td>
              <td class="govuk-table__cell">Plain language description of cookie purpose</td>
              <td class="govuk-table__cell">Cookie duration</td>
            </tr>
            <tr scope="row" class="govuk-table__row">
              <td class="govuk-table__cell">Cookie 2</td>
              <td class="govuk-table__cell">Plain language description of cookie purpose</td>
              <td class="govuk-table__cell">Cookie duration</td>
            </tr>
          </tbody>
        </table>
      </div>
    </details>
  </div>
  <div class="govuk-body" id="optional_cookies_desc">
    <h2 class="govuk-heading-l">Optional cookies</h2>
    <p>Optional cookies help us to improve the service, but it will work without them. We will not use them without your permission and you can change your mind at any time.</p>
    <form action="#">
      <h3 class="govuk-heading-m" id="google_analytics_cookies_desc">Analytics cookies (Google Analytics)</h3>
      <p class="govuk-body">We use Google Analytics software to collect information about how you use this service and help us make it better. We do not allow Google to use or share this data.</p>
      <details class="govuk-details" data-module="analytics-cookies-details">
        <summary class="govuk-details__summary">
          <span class="govuk-details__summary-text">
            Analytics cookies used by this service
          </span>
        </summary>
        <div class="govuk-details__text">
          <table class="govuk-table" aria-describedby="google_analytics_cookies_desc">
            <thead class="govuk-table__header">
              <tr>
                <th scope="col" class="govuk-table__header">Name</th>
                <th scope="col" class="govuk-table__header">Purpose</th>
                <th scope="col" class="govuk-table__header">Expires</th>
              </tr>
            </thead>
            <tbody class="govuk-table__body">
              <tr scope="row" class="govuk-table__row">
                <td class="govuk-table__cell">_ga</td>
                <td class="govuk-table__cell">Checks if you have visited before so we can count how many people use the service.</td>
                <td class="govuk-table__cell">2 years</td>
              </tr>
              <tr scope="row" class="govuk-table__row">
                <td class="govuk-table__cell">_ga_&lt;container-id&gt;</td>
                <td class="govuk-table__cell">Collects information about how you use the service so we can make it better.</td>
                <td class="govuk-table__cell">2 years</td>
              </tr>
            </tbody>
          </table>
        </div>
      </details>
      <div class="govuk-form-group">
        <fieldset class="govuk-fieldset">
          <legend class="govuk-fieldset__legend govuk-fieldset__legend--s govuk-visually-hidden">Can we use analytics cookies?</legend>
          <input value="" type="hidden" name="cookie_preferences_form[ga]" id="cookie_preferences_form_ga">
          <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
            <div class="govuk-radios__item">
              <input class="govuk-radios__input" id="google_analytics" name="google_analytics" type="radio" value="yes">
              <label class="govuk-label govuk-radios__label" for="google_analytics">
                Accept analytics cookies
              </label>
            </div>
            <div class="govuk-radios__item">
              <input class="govuk-radios__input" id="google_analytics-2" name="google_analytics" type="radio" value="no" checked>
              <label class="govuk-label govuk-radios__label" for="google_analytics-2">
                Reject analytics cookies
              </label>
            </div>
          </div>
        </fieldset>
      </div>
      <button class="govuk-button">Save cookie settings</button>
    </form>
  </div>
  <footer class="govuk-footer">
    <div class="govuk-width-container">
      <div class="govuk-footer__meta">
        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
          <h2 class="govuk-visually-hidden">Support links</h2>
          <ul class="govuk-footer__inline-list">
            <li class="govuk-footer__inline-list-item">
              <a class="govuk-footer__link" href="#">
                Cookies
              </a>
            </li>
          </ul>
          <svg
            aria-hidden="true"
            focusable="false"
            class="govuk-footer__licence-logo"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 483.2 195.7"
            height="17"
            width="41">
            <path
              fill="currentColor"
              d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
          </svg>
          <span class="govuk-footer__licence-description">
            All content is available under the
            <a
              class="govuk-footer__link"
              href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
              rel="license">Open Government Licence v3.0</a>, except where otherwise stated
          </span>
        </div>
        <div class="govuk-footer__meta-item">
          <a
            class="govuk-footer__link govuk-footer__copyright-logo"
            href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
            © Crown copyright
          </a>
        </div>
      </div>
    </div>
  </footer>