Replace grid-row with govuk-grid-row

Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2026-09-11 18:37:33 -04:00 · 2020-03-06 11:11:41 +00:00
parent be48f3bac5
commit b9b9a138f9
135 changed files with 174 additions and 176 deletions
@@ -28,7 +28,7 @@
  }
  $paneWrapper.append($previewPane);
-  $form.find('.grid-row').eq(0).prepend($paneWrapper);
+  $form.find('.govuk-grid-row').eq(0).prepend($paneWrapper);
  $form.attr('action', location.pathname.replace(new RegExp(`set-${previewType}-branding$`), `preview-${previewType}-branding`));
  $form.find('button[type="submit"]').text('Save');
@@ -172,7 +172,7 @@
 .folder-heading {
-  .grid-row & {
+  .govuk-grid-row & {
    margin: $gutter-half 0 20px 0;
    word-wrap: break-word;
  }
@@ -23,12 +23,10 @@
  &-list {
    @extend %grid-row;
    position: relative;
    &-permissions {
      @include grid-column(3/4);
      margin-top: 5px;
      li {
@@ -8,7 +8,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    {% if navigation_links %}
      <div class="column-one-quarter">
@@ -1,7 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}You’re not authorised to see this page{% endblock %}
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-two-thirds">
    <h1>You’re not authorised to see this page</h1>
      <p><a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.sign_in' )}}">Sign in</a> to GOV.UK Notify and try again.</p>
@@ -1,7 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}You’re not allowed to see this page{% endblock %}
 {% block maincolumn_content %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds">
        <h1 class="heading-large">
          You’re not allowed to see this page
@@ -1,7 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}Page not found{% endblock %}
 {% block maincolumn_content %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds">
        <h1 class="heading-large">
          Page not found
@@ -1,7 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}Page not found{% endblock %}
 {% block maincolumn_content %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds">
        <h1 class="heading-large">
          Page not found
@@ -1,12 +1,12 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}File too big{% endblock %}
 {% block maincolumn_content %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds">
        <h1 class="heading-large">
          The file you uploaded was too big
        </h1>
-        <div class="grid-row">
+        <div class="govuk-grid-row">
          <div class="column-two-thirds">
            <p>
              Files must be smaller than 5 MB.
@@ -1,7 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}Sorry, there’s a problem with the service{% endblock %}
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-two-thirds">
      <h1 class="heading-large">
        Sorry, there’s a problem with GOV.UK Notify
@@ -15,7 +15,7 @@
      </div>
      <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
    </div>
-    <div class="grid-row govuk-!-padding-bottom-12">
+    <div class="govuk-grid-row govuk-!-padding-bottom-12">
      <div class="column-one-quarter">
        {% include "org_nav.html" %}
      </div>
@@ -3,7 +3,7 @@
 <div class="ajax-block-container">
  {% if notifications_deleted %}
-    <div class="grid-row bottom-gutter-1-2">
+    <div class="govuk-grid-row bottom-gutter-1-2">
      {% for label, query_param, url, count in counts %}
        <div class="column-one-quarter">
          {{ big_number(count, label, smaller=True) }}
@@ -1,7 +1,7 @@
 {% from 'components/big-number.html' import big_number %}
 {% from 'components/message-count-label.html' import message_count_label %}
-<div class="grid-row bottom-gutter-2-3">
+<div class="govuk-grid-row bottom-gutter-2-3">
  <div class="column-half">
    <div class="keyline-block">
      {{ big_number(
@@ -2,7 +2,7 @@
 {% call banner_wrapper(type='tour') %}
    <p class="heading-medium">Try sending yourself this example</p>
-    <div class="grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
+    <div class="govuk-grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
      <div class="column-one-sixth">
        <p class="heading-large" style="float: left;">1.</p>
      </div>
@@ -12,7 +12,7 @@
        </p>
      </div>
    </div>
-    <div class="grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
+    <div class="govuk-grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
      <div class="column-one-sixth">
        <p class="heading-large">2.</p>
      </div>
@@ -22,7 +22,7 @@
        </p>
      </div>
    </div>
-    <div class="grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
+    <div class="govuk-grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
      <div class="column-one-sixth">
        <p class="heading-large">3.</p>
      </div>
@@ -11,7 +11,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-govuk-grid-row">
  <div class="column-two-thirds">
    {{ page_header('About your service') }}
@@ -12,7 +12,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-five-sixths">
    {{ page_header(
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-five-sixths">
    {{ page_header(
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-five-sixths">
    {{ page_header(
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-five-sixths">
    {{ page_header(
@@ -8,7 +8,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-five-sixths">
    {{ page_header(
@@ -9,7 +9,7 @@
 {% endblock %}
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
@@ -13,7 +13,7 @@
    'Callbacks for received text messages',
    back_link=url_for('.api_callbacks', service_id=current_service.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      <p>
        When you receive a text message in Notify, we can forward it to your system.
@@ -14,7 +14,7 @@
    API integration
  </h1>
-  <nav class="grid-row bottom-gutter-1-2">
+  <nav class="govuk-grid-row bottom-gutter-1-2">
    <div class="column-one-third">
      <a class="govuk-link govuk-link--no-visited-state pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
    </div>
@@ -26,7 +26,7 @@
    </div>
  </nav>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-half">
      <h2 class="heading-small">
        Message log
@@ -47,7 +47,7 @@
  {% call form_wrapper() %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds">
        {{ list_entry(
@@ -1,7 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% block per_page_title %}Invitation has been cancelled{% endblock %}
 {% block maincolumn_content %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds">
        <h1 class="heading-large">
          The invitation you were sent has been cancelled
@@ -8,7 +8,7 @@
  services=[]
 ) %}
  {% if show_heading %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-one-quarter">
        <h2>
          {{ heading }}
@@ -56,7 +56,7 @@
  <nav class="browse-list {% if current_user.has_access_to_live_and_trial_mode_services %}top-gutter-2-3{% endif %}">
    {% if current_user.platform_admin %}
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-one-quarter">
          <h2>
            Platform admin
@@ -102,7 +102,7 @@
  {% if can_add_service %}
    <div class="js-stick-at-bottom-when-scrolling">
      {% if current_user.has_access_to_live_and_trial_mode_services %}
-        <div class="grid-row">
+        <div class="govuk-grid-row">
          <div class="column-one-quarter">
            &nbsp;
          </div>
@@ -1,6 +1,6 @@
 <div class="ajax-block-container">
  {% for message in conversation %}
-    <div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
+    <div class="govuk-grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
      {% if message.inbound %}
        <div class="column-two-thirds sms-message-inbound">
          {{ message.content | string }}
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <div class="cookie-settings__confirmation banner banner-with-tick" data-cookie-confirmation="true" role="group" tabindex="-1">
      <h2 class="banner-title">Your cookie settings were saved</h2>
@@ -89,7 +89,7 @@
        <tbody>
            <tr>
                <td>
-                  _ga 
+                  _ga
                </td>
                <td width="50%">
                  Checks if you’ve visited Notify before. This helps us count how many people visit our site.
@@ -2,7 +2,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 <div class="ajax-block-container">
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div id="total-email" class="column-third">
      {{ big_number_with_status(
        statistics['email']['requested'],
@@ -1,6 +1,6 @@
 {% from "components/big-number.html" import big_number %}
-<div class='grid-row ajax-block-container'>
+<div class='govuk-grid-row ajax-block-container'>
  <div class='column-third'>
    <div class="keyline-block">
      {{ big_number("Unlimited", 'free email allowance', smaller=True) }}
@@ -17,7 +17,7 @@
    ) }}
    {% call form_wrapper() %}
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-five-sixths">
          {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
@@ -17,7 +17,7 @@
    ) }}
    {% call form_wrapper() %}
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-five-sixths">
          {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
@@ -17,7 +17,7 @@
    ) }}
    {% call form_wrapper() %}
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-two-thirds">
          {{ textbox(form.name, width='1-1', hint='Your recipients will not see this') }}
        </div>
@@ -38,7 +38,7 @@
      </a>
    </p>
  {% endif %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    {% call form_wrapper(class="column-three-quarters") %}
      {% include 'views/manage-users/permissions.html' %}
@@ -16,7 +16,7 @@
    '{} email branding'.format('Update' if email_branding else 'Add'),
    back_link=url_for('.email_branding')
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-three-quarters">
      {% if logo %}
        <div id="logo-img">
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">The link has expired</h1>
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Resend email link</h1>
@@ -16,7 +16,7 @@
  {% call form_wrapper(
      action=url_for('.find_services_by_name'),
-      class='grid-row'
+      class='govuk-grid-row'
  ) %}
    <div class="column-three-quarters">
      {{ textbox(
@@ -16,7 +16,7 @@
  {% call form_wrapper(
      action=url_for('.find_users_by_email'),
-      class='grid-row'
+      class='govuk-grid-row'
  ) %}
    <div class="column-three-quarters">
      {{ textbox(
@@ -6,7 +6,7 @@
 {% endblock %}
 {% block platform_admin_content %}
-  <div class="grid-row bottom-gutter">
+  <div class="govuk-grid-row bottom-gutter">
    <div class="column-whole">
      <h1 class="heading-large">
        {{ user.name }}
@@ -9,7 +9,7 @@ Create a new password
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Forgotten your password?</h1>
@@ -20,7 +20,7 @@ Inbound Numbers
 {% block platform_admin_content %}
-  <div class="grid-row bottom-gutter">
+  <div class="govuk-grid-row bottom-gutter">
    <div class="column-two-thirds">
      <h1 class="heading-large">
        Inbound SMS
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Integration testing</h1>
@@ -15,7 +15,7 @@
    '{} letter branding'.format('Update' if is_update else 'Add'),
    back_link=url_for('main.letter_branding')
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-three-quarters">
      {% if logo %}
        <div id="logo-img">
@@ -38,8 +38,8 @@
            {% endif %}
          </span>
        </h3>
-        <ul class="tick-cross-list">
+        <ul class="tick-cross-list govuk-grid-row">
-          <div class="tick-cross-list-permissions">
+          <div class="tick-cross-list-permissions govuk-grid-column-three-quarters">
            {% for permission, label in permissions %}
              {{ tick_cross(
                user.has_permission_for_service(current_service.id, permission),
@@ -14,7 +14,7 @@
  url_for('.edit_user_email', service_id=service_id, user_id=user.id)
 ) }}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-whole">
  {% call form_wrapper() %}
    <p>New email address:</p>
@@ -14,7 +14,7 @@
  back_link=url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id)
 ) }}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-whole">
  {% call form_wrapper() %}
    <p>New mobile number:</p>
@@ -16,7 +16,7 @@
  ) }}
  <p id="user_name">This will change the mobile number for {{ user.name }}.</p>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-three-quarters">
      {% call form_wrapper(class="extra-tracking") %}
        {{ textbox(form.mobile_number) }}
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    {% if user %}
      <h1 class="heading-large">
@@ -36,7 +36,7 @@
    {% call form_wrapper(
      action=url_for('.view_notifications', service_id=current_service.id, message_type=message_type),
-      class="grid-row"
+      class="govuk-grid-row"
    ) %}
      <div class="column-three-quarters {% if message_type == 'sms' %}extra-tracking{% endif %}">
        {{ textbox(
@@ -16,7 +16,7 @@
      <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
    </div>
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-one-quarter">
        &nbsp;
      </div>
@@ -17,7 +17,7 @@
      <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
    </div>
-    <div class="grid-row top-gutter-2-3">
+    <div class="govuk-grid-row top-gutter-2-3">
      <div class="column-one-quarter">
        <h1>
          All organisations
@@ -47,7 +47,7 @@
      </div>
    </div>
    <div class="js-stick-at-bottom-when-scrolling">
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-one-quarter">
          &nbsp;
        </div>
@@ -14,7 +14,7 @@
    "Data sharing and financial agreement",
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {% call form_wrapper() %}
        {{ radios(
@@ -14,7 +14,7 @@
    "Crown organisation",
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {% call form_wrapper() %}
        {{ radios(form.crown_status) }}
@@ -15,7 +15,7 @@
    "Known email domains",
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      <p>
        If a user’s email addresses ends with one of these domains then
@@ -14,7 +14,7 @@
    "Edit request to go live notes",
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      <p>
        Text entered here will be displayed in the Zendesk ticket when a service
@@ -15,7 +15,7 @@
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-three-quarters">
    {% call form_wrapper() %}
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
  <h1 class="heading-large">Preview email branding</h1>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-full">
      <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
      {% call form_wrapper(action=action) %}
@@ -8,7 +8,7 @@
 {% block maincolumn_content %}
  <h1 class="heading-large">Preview letter branding</h1>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-full">
      <iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
      {% call form_wrapper(action=action) %}
@@ -16,11 +16,11 @@
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
  {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full preview-pane">
      </div>
    </div>
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full">
        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search branding styles by name') }}
        {{ radios(form.branding_style) }}
@@ -16,11 +16,11 @@
    back_link=url_for('.organisation_settings', org_id=current_org.id)
  ) }}
  {% call form_wrapper(data_kwargs={'preview-type': 'letter'}) %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full preview-pane">
      </div>
    </div>
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full">
        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search by name') }}
        {{ radios(form.branding_style, hide_legend=True) }}
@@ -6,7 +6,7 @@ Check your email
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Check your email</h1>
@@ -5,7 +5,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-one-quarter">
      <p class="heading-medium">
        Platform admin
@@ -1,6 +1,6 @@
 {% from "components/big-number.html" import big_number_with_status %}
 {% from "components/message-count-label.html" import message_count_label %}
-<div class="grid-row bottom-gutter">
+<div class="govuk-grid-row bottom-gutter">
  <div class="column-third">
    {{ big_number_with_status(
      global_stats.email.delivered + global_stats.email.failed,
@@ -32,7 +32,7 @@
    "open": form.errors | convert_to_boolean
  }) }}
-  <div class="grid-row bottom-gutter">
+  <div class="govuk-grid-row bottom-gutter">
    {% for noti_type in global_stats %}
      <div class="column-third">
        {{ big_number_simple(
@@ -53,7 +53,7 @@
    {% endfor %}
  </div>
-  <div class="grid-row bottom-gutter">
+  <div class="govuk-grid-row bottom-gutter">
    {% for noti_type in global_stats %}
      <div class="column-third">
        <div class="bordered-text-box">
@@ -9,7 +9,7 @@
 {% block platform_admin_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Submit returned letters</h1>
    {% call form_wrapper() %}
@@ -6,7 +6,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Privacy notice: how we use your data</h1>
@@ -16,7 +16,7 @@
    <p>GOV.UK Notify is a service that lets public service teams in the UK send emails, text messages, and letters
      to users of their service.</p>
-    
+
    <p>GOV.UK Notify is provided by the Government Digital Service (GDS) which is part of the Cabinet Office.</p>
    <p>Organisations sending notifications using GOV.UK Notify are the data controller and Cabinet Office is the data processor. The data controller must tell you about what they are doing with your personal data.</p>
@@ -63,7 +63,7 @@
    <h2 class="heading-medium">Where your data is processed and stored</h2>
-    <p>We design, build and run our systems to make sure that your data is as safe as possible at any stage, both while it’s 
+    <p>We design, build and run our systems to make sure that your data is as safe as possible at any stage, both while it’s
      processed and when it’s stored.</p>
    <p>Your personal data will not be transferred outside of the European Economic Area (EEA) throughout the course of its
@@ -112,7 +112,7 @@
    <h2 class="heading-medium">Questions and complaints</h2>
    <p>Contact the GDS Privacy Team if you either:</p>
-    
+
    <ul class="list list-bullet">
      <li>have any questions about anything in this document</li>
      <li>think that your personal data has been misused or mishandled</li>
@@ -122,11 +122,11 @@
    GDS Privacy Team<br>
    <a class="govuk-link govuk-link--no-visited-state" href="mailto:gds-privacy-office@digital.cabinet-office.gov.uk">gds-privacy-office@digital.cabinet-office.gov.uk</a>
    </p>
-    
+
    <p>
    You can also contact the Cabinet Office Data Protection Officer.
    </p>
-    
+
    <p>
    Data Protection Officer<br>
    <a class="govuk-link govuk-link--no-visited-state" href="mailto:DPO@cabinetoffice.gov.uk">DPO@cabinetoffice.gov.uk</a><br>
@@ -137,7 +137,7 @@
    </p>
    <p>If you have a complaint, you can also contact the <a class="govuk-link govuk-link--no-visited-state" href="https://ico.org.uk/">Information Commissioner's Office</a> (ICO). The ICO is an independent regulator set up to uphold information rights.</p>
-    
+
    <p>
    Information Commissioner’s Office<br>
    <a class="govuk-link govuk-link--no-visited-state" href="mailto:casework@ico.org.uk">casework@ico.org.uk</a><br>
@@ -10,7 +10,7 @@ Provider - {{provider.display_name}}
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
    <div class="column-three-quarters">
        {{ page_header(
@@ -19,7 +19,7 @@
  </h2>
  <div class="bottom-gutter">
    <div class="history-list-item">
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-one-third">&nbsp;</div>
        <div class="column-two-thirds">
          <div class="history-list-percentage-without-border">
@@ -59,7 +59,7 @@
    <ul class="bottom-gutter">
      {% for version in versions %}
        <li class="history-list-item">
-          <div class="grid-row">
+          <div class="govuk-grid-row">
            <div class="column-one-third">
              <div class="history-list-user">
                {{ version.created_by.name or ('&nbsp;'|safe) }}
@@ -9,7 +9,7 @@ Provider versions
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    {{ page_header(
@@ -7,7 +7,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">{{ title }}</h1>
    <p>For security, we need to check if you still have access to your email address.</p>
@@ -9,7 +9,7 @@ Create an account
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Create an account</h1>
    <p>
@@ -9,7 +9,7 @@ Create an account
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Create an account</h1>
    <p>Your account will be created with this email: {{invited_org_user.email_address}}</p>
@@ -9,7 +9,7 @@ Create an account
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    <h1 class="heading-large">Create an account</h1>
    {% call form_wrapper(autocomplete=True) %}
@@ -21,7 +21,7 @@
    module="autofocus",
    data_kwargs={'force-focus': True}
  ) %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
        {{ textbox(
          form.placeholder_value,
@@ -15,7 +15,7 @@
    back_link=url_for('main.service_settings', service_id=current_service.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-three-quarters">
    {% call form_wrapper() %}
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row bottom-gutter">
+  <div class="govuk-grid-row bottom-gutter">
    <div class="column-two-thirds">
      <h1 class="heading-large">
        Data retention
@@ -24,7 +24,7 @@
    }) }}
  </div>
  </div>
-  <div class="grid-row bottom-gutter">
+  <div class="govuk-grid-row bottom-gutter">
      <div class="column-full">
          By default data is kept for 7 days
      </div>
@@ -10,7 +10,7 @@
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-three-quarters">
      <h1 class="heading-large">Delete this service from GOV.UK Notify</h1>
@@ -39,7 +39,7 @@
      </div>
    {% endfor %}
  </div>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-whole">
      {% if current_user.has_permissions('manage_service') %}
        <div class="js-stick-at-bottom-when-scrolling">
@@ -11,7 +11,7 @@
 {% endblock %}
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-whole">
      {% if not form.at_least_one_volume_filled %}
        {% call banner_wrapper(type='dangerous') %}
@@ -49,7 +49,7 @@
    {% endfor %}
  </div>
  {% if current_user.has_permissions('manage_service') %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-whole">
        <div class="js-stick-at-bottom-when-scrolling">
          {{ govukButton({
@@ -15,7 +15,7 @@
    'Add a new address',
    back_link=back_link
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-whole">
      {% call form_wrapper() %}
        {{ textbox(
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
  <h1 class="heading-large">Preview email branding</h1>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-full">
      <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
      {% call form_wrapper(action=action) %}
@@ -9,7 +9,7 @@
 {% block platform_admin_content %}
  <h1 class="heading-large">Preview letter branding</h1>
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-full">
      <iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
      {% call form_wrapper(action=action) %}
@@ -9,7 +9,7 @@
 {% endblock %}
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-whole">
      {{ page_header(
        'Before you request to go live',
@@ -11,7 +11,7 @@
 {% endblock %}
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Send files by email',
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Sign-in method',
@@ -16,11 +16,11 @@
    back_link=url_for('.service_settings', service_id=current_service.id)
  ) }}
  {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full preview-pane">
      </div>
    </div>
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full">
        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search branding styles by name') }}
        {{ radios(form.branding_style) }}
@@ -10,7 +10,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Send emails',
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Receive text messages',
@@ -10,7 +10,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Send international text messages',
@@ -16,11 +16,11 @@
    back_link=url_for('.service_settings', service_id=current_service.id)
  ) }}
  {% call form_wrapper(data_kwargs={'preview-type': 'letter'}) %}
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full preview-pane">
      </div>
    </div>
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-full">
        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search by name') }}
        {{ radios(form.branding_style, hide_legend=True) }}
@@ -14,7 +14,7 @@
    'Letter contact details',
    back_link=None if request.args.get('from_template') else url_for('.service_settings', service_id=current_service.id)
  ) }}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    {% call form_wrapper(class="column-half") %}
      {{ textbox(
        form.letter_contact_block,
@@ -10,7 +10,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Send letters',
@@ -10,7 +10,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        title,
@@ -10,7 +10,7 @@
 {% block maincolumn_content %}
-  <div class="grid-row">
+  <div class="govuk-grid-row">
    <div class="column-five-sixths">
      {{ page_header(
        'Send text messages',
@@ -43,7 +43,7 @@
  </div>
  {% if current_user.has_permissions('manage_service') %}
-    <div class="grid-row bottom-gutter">
+    <div class="govuk-grid-row bottom-gutter">
      <div class="column-whole">
        {{ govukButton({
          "element": "a",
@@ -23,7 +23,7 @@
         </li>
       </ol>
      </nav>
-      <div class="grid-row">
+      <div class="govuk-grid-row">
        <div class="column-two-thirds">
          <h1>
            Send emails, text messages and letters to your users
@@ -47,7 +47,7 @@
  </div>
  <div class="product-page-section">
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-half">
        <h2>
          Control your content
@@ -63,7 +63,7 @@
    </div>
  </div>
  <div class="product-page-section">
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-half">
        <h2>
          See how your messages perform
@@ -85,7 +85,7 @@
    <h2 class="with-keyline">
      Send messages manually or automatically
    </h2>
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-half">
        <p>
          Upload a spreadsheet of email&nbsp;addresses or
@@ -121,7 +121,7 @@
  <div class="product-page-section">
    <div class="with-keyline bottom-gutter-2" id="whos-using-notify">
      <h2>Who’s using GOV.UK Notify</h2>
-      <div class="grid-row bottom-gutter">
+      <div class="govuk-grid-row bottom-gutter">
        <div class="column-half">
          <h3 class="govuk-visually-hidden">Services</h3>
          <div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
@@ -142,7 +142,7 @@
  <div class="product-page-section">
    <div class="with-keyline bottom-gutter-2">
      <h2>Pricing</h2>
-      <div class="grid-row bottom-gutter">
+      <div class="govuk-grid-row bottom-gutter">
        <div class="column-half">
          <h3 class="govuk-visually-hidden">Emails</h3>
          <div class="product-page-big-number">Unlimited</div>
@@ -170,7 +170,7 @@
    </div>
  </div>
  <div class="product-page-section">
-    <div class="grid-row">
+    <div class="govuk-grid-row">
      <div class="column-half">
        <h2 class="with-keyline">
          The team
@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
-<div class="grid-row">
+<div class="govuk-grid-row">
  <div class="column-two-thirds">
    {% if again %}
--- a/Show More
+++ b/Show More