Add GOV.UK Design System style back links

The Design System has standardised on back links being at the top of the
page, decorated with a small text-coloured arrow.

I think this makes more sense than having them at the bottom, because it
suggests, in some way, being able to go back before commiting to any of
the forms on the page. Whereas the things at the bottom of the page
should be performing actions on what’s in the page.

The reason for making this change now is that it de-clutters the area
around the green buttons. This was presenting a design challenge where
multiple levels of interaction were happening in the same form. Moving
these back links to the top of the page should mean that, in these
complicated forms, there’s one fewer thing to compete for the user’s
attention.

I’ve componentised this into a `page_header` macro so that the change is
easier to roll out and maintain.

app/assets/stylesheets/components/vendor/govuk-back-link.scss

@@ -0,0 +1,35 @@
+.govuk-back-link {
+
+  @include core-16;
+  color: $text-colour;
+  display: inline-block;
+  position: relative;
+  margin-top: $gutter-half;
+  margin-bottom: $gutter / 3;
+  padding-left: $gutter-half - 1px;
+  border-bottom: 1px solid $text-colour;
+  text-decoration: none;
+
+  &:link,
+  &:visited {
+    color: $text-colour;
+  }
+
+  &:before {
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
+    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
+    border-width: 5px 6px 5px 0;
+    border-right-color: inherit;
+    content: "";
+    position: absolute;
+    top: -1px;
+    bottom: 1px;
+    left: 0;
+    margin: auto;
+  }
+}

app/assets/stylesheets/main.scss

@@ -65,6 +65,7 @@ $path: '/static/images/';
 @import 'components/vendor/responsive-embed';
 @import 'components/preview-pane';
 @import 'components/task-list';
+@import 'components/vendor/govuk-back-link';
 
 @import 'views/dashboard';
 @import 'views/users';

app/main/views/templates.py

@@ -409,7 +409,7 @@ def copy_template(service_id, template_id):
     return render_template(
         'views/edit-{}-template.html'.format(template['template_type']),
         form=form,
-        template_type=template['template_type'],
+        template=template,
         heading_action='Add',
         services=user_api_client.get_service_ids_for_user(current_user),
     )
@@ -570,6 +570,7 @@ def add_service_template(service_id, template_type, template_folder_id=None):
             '.action_blocked',
             service_id=service_id,
             notification_type=template_type,
+            template_folder_id=template_folder_id,
             return_to='templates',
             template_id='0'
         ))
@@ -578,6 +579,7 @@ def add_service_template(service_id, template_type, template_folder_id=None):
             'views/edit-{}-template.html'.format(template_type),
             form=form,
             template_type=template_type,
+            template_folder_id=template_folder_id,
             heading_action='New',
         )
 
@@ -665,8 +667,7 @@ def edit_service_template(service_id, template_id):
         return render_template(
             'views/edit-{}-template.html'.format(template['template_type']),
             form=form,
-            template_id=template_id,
+            template=template,
-            template_type=template['template_type'],
             heading_action='Edit',
         )
 

app/templates/components/page-header.html

@@ -0,0 +1,19 @@
+{% macro page_header(
+  h1,
+  back_link=None
+) %}
+
+  {% if back_link %}
+    {{ govuk_back_link(back_link) }}
+  {% endif %}
+
+  <h1 class="heading-large">{{ h1 }}</h1>
+
+{% endmacro %}
+
+
+{% macro govuk_back_link(back_link) %}
+
+  <a class="govuk-back-link" href="{{ back_link }}">Back</a>
+
+{% endmacro %}

app/templates/views/add-service.html

@@ -1,6 +1,7 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -13,9 +14,7 @@
 <div class="grid-row">
   <div class="column-two-thirds">
 
-    <h1 class="heading-large">
+    {{ page_header('About your service') }}
-      About your service
-    </h1>
 
     {% call form_wrapper() %}
 

app/templates/views/api/callbacks.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import mapping_table, row, text_field, edit_field, optional_text_field with context %}
 
@@ -9,7 +10,10 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  <h1 class="heading-large">Callbacks</h1>
+  {{ page_header(
+    'Callbacks',
+    back_link=url_for('main.api_integration', service_id=current_service.id)
+  ) }}
   <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
 		{% call mapping_table(
 	    caption='General',
@@ -30,8 +34,4 @@
 	    {% endcall %}
 	  {% endcall %}
 	</div>
-  {{ page_footer(
-    secondary_link=url_for('.api_integration', service_id=current_service.id),
-    secondary_link_text='Back to API integration'
-  ) }}
 {% endblock %}

app/templates/views/api/callbacks/delivery-status-callback.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,12 @@
 {% block maincolumn_content %}
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Callbacks for delivery receipts</h1>
+
+      {{ page_header(
+        'Callbacks for delivery receipts',
+        back_link=url_for(back_link, service_id=current_service.id)
+      ) }}
+
       <p>
         When you send an email or text message, we can tell you if Notify was able to deliver it.
         Check the <a href="{{ url_for('.callbacks') }}"> callback documentation </a> for more information.
@@ -28,11 +34,6 @@
           hint='At least 10 characters',
           autocomplete='new-password'
         ) }}
-        {{ page_footer(
-          'Save',
-          back_link=url_for(back_link, service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/api/callbacks/received-text-messages-callback.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -8,7 +9,10 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  <h1 class="heading-large">Callbacks for received text messages</h1>
+  {{ page_header(
+    'Callbacks for received text messages',
+    back_link=url_for('.api_callbacks', service_id=current_service.id)
+  ) }}
   <div class="grid-row">
     <div class="column-five-sixths">
       <p>
@@ -28,11 +32,7 @@
           hint='At least 10 characters',
           autocomplete='new-password'
         ) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.api_callbacks', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/api/keys.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    API keys
+    'API keys',
-  </h1>
+    back_link=url_for('main.api_integration', service_id=current_service.id)
+  ) }}
 
   <div class="body-copy-table">
     {% call(item, row_number) list_table(

app/templates/views/api/keys/create.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/radios.html" import radios %}
@@ -11,9 +12,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Create an API key
+    'Create an API key',
-  </h1>
+    back_link=url_for('main.api_keys', service_id=current_service.id)
+  ) }}
 
   {% call form_wrapper() %}
     {{ textbox(form.key_name, label='Name for this key') }}

app/templates/views/api/whitelist.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/list-entry.html" import list_entry %}
 {% from "components/form.html" import form_wrapper %}
@@ -32,9 +33,10 @@
       </ul>
     {% endcall %}
   {% else %}
-    <h1 class="heading-large">
+    {{ page_header(
-      Whitelist
+      'Whitelist',
-    </h1>
+      back_link=url_for('main.api_integration', service_id=current_service.id)
+    ) }}
   {% endif %}
 
   <p>
@@ -63,11 +65,7 @@
       </div>
     </div>
 
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      'Save',
-      secondary_link=url_for('.api_integration', service_id=current_service.id),
-      secondary_link_text='Back to API integration'
-    ) }}
 
   {% endcall %}
 

app/templates/views/check/column-errors.html

@@ -3,7 +3,7 @@
 {% from "components/radios.html" import radio_select %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
-{% from "components/page-footer.html" import page_footer %}
+{% from "components/page-header.html" import govuk_back_link %}
 {% from "components/message-count-label.html" import message_count_label %}
 
 {% set file_contents_header_id = 'file-preview' %}
@@ -19,7 +19,9 @@
 
 {% block maincolumn_content %}
 
-  <div class="bottom-gutter">
+  {{ govuk_back_link(back_link) }}
+
+  <div class="bottom-gutter-1-2">
     {% call banner_wrapper(type='dangerous') %}
 
       {% if recipients.too_many_rows %}
@@ -135,9 +137,7 @@
 
   <div class="js-stick-at-top-when-scrolling">
     <div class="form-group">
-      {% if request.args.from_test %}
+      {% if not request.args.from_test %}
-        <a href="{{ back_link }}" class="page-footer-back-link">Back</a>
-      {% else %}
         {{ file_upload(
           form.file,
           action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),

app/templates/views/check/ok.html

@@ -3,6 +3,7 @@
 {% from "components/radios.html" import radio_select %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/message-count-label.html" import message_count_label %}
 
@@ -19,9 +20,11 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Preview of {{ template.name }}
+    'Preview of {}'.format(template.name),
-  </h1>
+    back_link=back_link
+  ) }}
+
   {{ skip_to_file_contents() }}
 
   {{ template|string }}
@@ -41,7 +44,6 @@
       {% else %}
         <a href="{{ url_for('main.check_messages_preview', service_id=current_service.id, template_id=template.id, upload_id=upload_id, filetype='pdf') }}" download class="button">Download as a PDF</a>
       {% endif %}
-      <a href="{{ back_link }}" class="page-footer-back-link">Back</a>
     </form>
   </div>
 

app/templates/views/check/row-errors.html

@@ -3,7 +3,7 @@
 {% from "components/radios.html" import radio_select %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
-{% from "components/page-footer.html" import page_footer %}
+{% from "components/page-header.html" import govuk_back_link %}
 {% from "components/message-count-label.html" import message_count_label %}
 
 {% set file_contents_header_id = 'file-preview' %}
@@ -19,6 +19,8 @@
 
 {% block maincolumn_content %}
 
+  {{ govuk_back_link(back_link) }}
+
   <div class="bottom-gutter-1-2">
     {% call banner_wrapper(type='dangerous') %}
       {% if row_errors|length == 1 %}

app/templates/views/edit-email-template.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import sticky_page_footer %}
 {% from "components/radios.html" import radios %}
 {% from "components/form.html" import form_wrapper %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">
+    {{ page_header(
-      {{ heading_action }} email template
+      '{} email template'.format(heading_action),
-    </h1>
+      back_link=url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id)
+    ) }}
 
     {% call form_wrapper() %}
       <div class="grid-row">

app/templates/views/edit-letter-template.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import sticky_page_footer %}
 {% from "components/radios.html" import radios %}
 {% from "components/form.html" import form_wrapper %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">
+    {{ page_header(
-      {{ heading_action }} letter template
+      '{} letter template'.format(heading_action),
-    </h1>
+      back_link=url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id)
+    ) }}
 
     {% call form_wrapper() %}
       <div class="grid-row">

app/templates/views/edit-sms-template.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import sticky_page_footer %}
 {% from "components/radios.html" import radios %}
 {% from "components/form.html" import form_wrapper %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">
+    {{ page_header(
-      {{ heading_action }} text message template
+      '{} text message template'.format(heading_action),
-    </h1>
+      back_link=url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id)
+    ) }}
 
     {% call form_wrapper() %}
       <div class="grid-row">

app/templates/views/edit-user-permissions.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/banner.html" import banner %}
@@ -18,9 +19,10 @@
     ) }}
   {% endif %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    {{ user.name or user.email_localpart }}
+    user.name or user.email_localpart,
-  </h1>
+    back_link=url_for('main.manage_users', service_id=current_service.id)
+  ) }}
 
   <p>
     {{ user.email_address }}&emsp;<a href="{{ url_for('.edit_user_email', service_id=current_service.id, user_id=user.id)}}">Change</a>

app/templates/views/email-branding/manage-branding.html

@@ -1,5 +1,6 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/file-upload.html" import file_upload %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/radios.html" import radios %}
@@ -11,7 +12,10 @@
 
 {% block platform_admin_content %}
 
-  <h1 class="heading-large">{{ '{} email branding'.format('Update' if email_branding else 'Add')}}</h1>
+  {{ page_header(
+    '{} email branding'.format('Update' if email_branding else 'Add'),
+    back_link=url_for('.email_branding')
+  ) }}
   <div class="grid-row">
     <div class="column-three-quarters">
       {% if logo %}
@@ -32,9 +36,7 @@
           {{ page_footer(
             'Save',
             button_name='operation',
-            button_value='email-branding-details',
+            button_value='email-branding-details'
-            back_link=url_for('.email_branding'),
-            back_link_text='Back to email branding selection',
           ) }}
         </div>
       {% endcall %}

app/templates/views/invite-user.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Invite a team member
+    'Invite a team member',
-  </h1>
+    back_link=url_for('main.manage_users', service_id=current_service.id)
+  ) }}
 
   {% call form_wrapper() %}
 

app/templates/views/letter-branding/manage-letter-branding.html

@@ -1,5 +1,6 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/file-upload.html" import file_upload %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
@@ -11,6 +12,10 @@
 {% block platform_admin_content %}
 
   <h1 class="heading-large">{{ '{} letter branding'.format('Update' if is_update else 'Add')}}</h1>
+  {{ page_header(
+    '{} letter branding'.format('Update' if is_update else 'Add'),
+    back_link=url_for('main.letter_branding')
+  ) }}
   <div class="grid-row">
     <div class="column-three-quarters">
       {% if logo %}
@@ -28,9 +33,7 @@
           {{ page_footer(
             'Save',
             button_name='operation',
-            button_value='branding-details',
+            button_value='branding-details'
-            back_link=url_for('main.letter_branding'),
-            back_link_text='Back to letter branding selection',
           ) }}
         </div>
       {% endcall %}

app/templates/views/manage-users/confirm-edit-user-email.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -8,7 +9,10 @@
 
 {% block maincolumn_content %}
 
-<h1 class="heading-large">Confirm change of email address</h1>
+{{ page_header(
+  'Confirm change of email address',
+  url_for('.edit_user_email', service_id=service_id, user_id=user.id)
+) }}
 
 <div class="grid-row">
   <div class="column-whole">
@@ -18,11 +22,7 @@
       <p>{{ new_email }}</p>
     </div>
     <p>We will send {{ user.name }} an email to tell them about the change.</p>
-    {{ page_footer(
+    {{ page_footer('Confirm') }}
-      'Confirm',
-      destructive=destructive,
-      back_link=url_for('.edit_user_email', service_id=service_id, user_id=user.id)
-    ) }}
   {% endcall %}
   </div>
 </div>

app/templates/views/manage-users/confirm-edit-user-mobile-number.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -8,7 +9,10 @@
 
 {% block maincolumn_content %}
 
-<h1 class="heading-large">Confirm change of mobile number</h1>
+{{ page_header(
+  'Confirm change of mobile number',
+  back_link=url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id)
+) }}
 
 <div class="grid-row">
   <div class="column-whole">
@@ -18,11 +22,7 @@
       <p>{{ new_mobile_number }}</p>
     </div>
     <p>We will send {{ user.name }} a text message to tell them about the change.</p>
-    {{ page_footer(
+    {{ page_footer('Confirm') }}
-      'Confirm',
-      destructive=destructive,
-      back_link=url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id)
-    ) }}
   {% endcall %}
   </div>
 </div>

app/templates/views/manage-users/edit-user-email.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,19 +10,15 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change team member’s email address</h1>
+  {{ page_header(
+    'Change team member’s email address',
+    back_link=url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id)
+  ) }}
+
   <p id="user_name">This will change the email address for {{ user.name }}.</p>
-  <div class="grid-row">
+  {% call form_wrapper() %}
-    <div class="column-three-quarters">
+    {{ textbox(form.email_address, width='1-1', safe_error_message=True) }}
-      {% call form_wrapper() %}
+    {{ page_footer('Save') }}
-        {{ textbox(form.email_address, safe_error_message=True) }}
+  {% endcall %}
-        {{ page_footer(
-          'Save',
-          back_link=url_for('.edit_user_permissions', service_id=service_id, user_id=user.id),
-          back_link_text="Back"
-        ) }}
-      {% endcall %}
-    </div>
-  </div>
 
 {% endblock %}

app/templates/views/manage-users/edit-user-mobile.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,17 +10,17 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change team member’s mobile number</h1>
+  {{ page_header(
+    'Change team member’s mobile number',
+    back_link=url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id)
+  ) }}
+
   <p id="user_name">This will change the mobile number for {{ user.name }}.</p>
   <div class="grid-row">
     <div class="column-three-quarters">
       {% call form_wrapper(class="extra-tracking") %}
         {{ textbox(form.mobile_number) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.edit_user_permissions', service_id=service_id, user_id=user.id),
-          back_link_text="Back"
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/notifications/check.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/message-count-label.html" import message_count_label %}
+{% from "components/page-header.html" import govuk_back_link, page_header %}
 
 {% block service_page_title %}
   {{ "Error" if error else "Preview of ‘{}’".format(template.name) }}
@@ -8,6 +9,7 @@
 
 {% block maincolumn_content %}
   {% if template.template_type == 'letter' and current_service.trial_mode %}
+    {{ govuk_back_link(back_link) }}
     {% set error = 'trial-mode-letters' %}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
@@ -19,6 +21,7 @@
       {% endcall %}
     </div>
   {% elif error == 'not-allowed-to-send-to' %}
+    {{ govuk_back_link(back_link) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
         {% with
@@ -32,6 +35,7 @@
       {% endcall %}
     </div>
   {% elif error == 'too-many-messages' %}
+    {{ govuk_back_link(back_link) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
         {% include "partials/check/too-many-messages.html" %}
@@ -39,15 +43,17 @@
     </div>
   {% elif error == 'message-too-long' %}
     {# the only row_errors we can get when sending one off messages is that the message is too long #}
+    {{ govuk_back_link(back_link) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
         {% include "partials/check/message-too-long.html" %}
       {% endcall %}
     </div>
   {% else %}
-    <h1 class="heading-large">
+    {{ page_header(
-      Preview of ‘{{ template.name }}’
+      'Preview of ‘{}’'.format(template.name),
-    </h1>
+      back_link=back_link
+    ) }}
   {% endif %}
 
   {{ template|string }}
@@ -63,7 +69,6 @@
       {% if not error %}
         <button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
       {% endif %}
-      <a href="{{ back_link }}" class="page-footer-back-link">Back</a>
       {% if template.template_type == 'letter' %}
         <a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link">Download as a PDF</a>
       {% endif %}

app/templates/views/notifications/notification.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner %}
 {% from "components/ajax-block.html" import ajax_block %}
 {% from "components/message-count-label.html" import message_count_label %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">
+    {{ page_header(
-      {{ message_count_label(1, template.template_type, suffix='') | capitalize }}
+      message_count_label(1, template.template_type, suffix='') | capitalize,
-    </h1>
+      back_link=None if request.args.get('help') == '0' else url_for('main.view_notifications', service_id=current_service.id, message_type=template.template_type)
+    ) }}
 
     <p>
       {% if is_precompiled_letter %}

app/templates/views/organisations/add-organisation.html

@@ -1,4 +1,5 @@
 {% extends "views/platform-admin/_base_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
@@ -13,14 +14,14 @@
 
 {% block platform_admin_content %}
 
-  <h1 class="heading-large">New organisation</h1>
+  {{ page_header(
+    'New organisation',
+    back_link=url_for('.organisations')
+  ) }}
+
   {% call form_wrapper() %}
     {{textbox(form.name)}}
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      'Save',
-      back_link=url_for('.organisations'),
-      back_link_text='Back to organisations',
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/organisations/organisation/settings/edit-name/confirm.html

@@ -1,5 +1,6 @@
 {% extends "org_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,7 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Confirm organisation name change</h1>
+  {{ page_header(
+    'Confirm organisation name change',
+    back_link=url_for('.organisation_settings', org_id=current_org.id)
+  ) }}
 
   <div class="grid-row">
     <div class="column-three-quarters">
@@ -17,11 +21,7 @@
     {% call form_wrapper() %}
       {{ textbox(form.password) }}
       <p> Your organisation name will be changed from {{ current_org.name }} to {{ new_name }} </p>
-      {{ page_footer(
+      {{ page_footer('Confirm') }}
-        'Confirm',
-        destructive=destructive,
-        back_link=url_for('.organisation_settings', org_id=current_org.id)
-      ) }}
     {% endcall %}
     </div>
   </div>

app/templates/views/organisations/organisation/settings/edit-name/index.html

@@ -1,4 +1,5 @@
 {% extends "org_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
@@ -9,14 +10,14 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change organisation name</h1>
+  {{ page_header(
+    'Change organisation name',
+    back_link=url_for('.organisation_settings', org_id=current_org.id)
+  ) }}
+
   {% call form_wrapper() %}
     {{textbox(form.name)}}
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      'Save',
-      back_link=url_for('.organisation_settings', org_id=current_org.id),
-      back_link_text='Back to settings',
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/organisations/organisation/users/user/index.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,9 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    {{ user.name or user.email_localpart }}
+    user.name or user.email_localpart,
-  </h1>
+    back_link=url_for('.manage_org_users', org_id=current_org.id)
+  ) }}
 
   <p>
     {{ user.email_address }}
@@ -20,8 +22,6 @@
   {% call form_wrapper(class="column-three-quarters") %}
       {{ page_footer(
         'Save',
-        back_link=url_for('.manage_org_users', org_id=current_org.id),
-        back_link_text="Back",
         delete_link=url_for('.remove_user_from_organisation', org_id=current_org.id, user_id=user.id) if user or None,
         delete_link_text='Remove user from organisation'
       ) }}

app/templates/views/providers/edit-provider.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -12,7 +13,10 @@ Provider - {{provider.display_name}}
 <div class="grid-row">
     <div class="column-three-quarters">
 
-        <h1 class="heading-large">{{provider.display_name}}</h1>
+        {{ page_header(
+          provider.display_name,
+          back_link=url_for('.view_providers')
+        ) }}
 
         <p>Update provider:</p>
 
@@ -22,7 +26,7 @@ Provider - {{provider.display_name}}
 
         {% call form_wrapper() %}
             {{ textbox(form.priority) }}
-            {{ page_footer('Save', back_link=url_for('.view_providers'), back_link_text="Back to providers") }}
+            {{ page_footer('Save') }}
         {% endcall %}
 
     </div>

app/templates/views/providers/provider.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block per_page_title %}
@@ -9,8 +10,12 @@ Provider versions
 {% block maincolumn_content %}
 
 <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="column-two-thirds">
-        <h1 class="heading-large">{{ provider_versions[0].display_name }}</h1>
+
+    {{ page_header(
+      provider_versions[0].display_name,
+      back_link=url_for('main.view_providers')
+    ) }}
 
     {% call(item, row_number) list_table(
         provider_versions,
@@ -41,11 +46,6 @@ Provider versions
 
       {% endcall %}
 
-    {{ page_footer(
-      back_link=url_for('main.view_providers'),
-      back_link_text="Back to providers"
-    ) }}
-
     </div>
 </div>
 

app/templates/views/send-test.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/message-count-label.html" import recipient_count_label %}
 {% from "components/textbox.html" import textbox %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    {{ page_title }}
+    page_title,
-  </h1>
+    back_link=back_link
+  ) }}
 
   {% call form_wrapper(
     class='js-stick-at-top-when-scrolling send-one-off-form' if template.template_type != 'sms' else 'send-one-off-form',
@@ -40,7 +42,7 @@
         </a>
       </p>
     {% endif %}
-    {{ page_footer('Continue', back_link=back_link) }}
+    {{ page_footer('Continue') }}
   {% endcall %}
 
   {{ template|string }}

app/templates/views/send.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/message-count-label.html" import recipient_count_label %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Upload a list of {{ recipient_count_label(999, template.template_type) }}
+    'Upload a list of {}'.format(recipient_count_label(999, template.template_type)),
-  </h1>
+    back_link=url_for('main.send_one_off', service_id=current_service.id, template_id=template.id)
+  ) }}
 
   <div class="page-footer bottom-gutter">
     {{file_upload(

app/templates/views/service-settings/branding/email-options.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radio %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Email branding</h1>
+  {{ page_header(
+    'Email branding',
+    back_link=url_for('main.service_settings', service_id=current_service.id)
+  ) }}
 
   {% call form_wrapper() %}
     <fieldset class="form-group {% if form.options.errors %}form-group-error{% endif %} top-gutter">
@@ -37,11 +41,7 @@
       We’ll email you once your branding’s ready to use, or if we need any
       more info.
     </p>
-    {{ page_footer(
+    {{ page_footer('Request new branding') }}
-      'Request new branding',
-      destructive=destructive,
-      back_link=url_for('.service_settings', service_id=current_service.id)
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/confirm.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,7 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">{{ heading }}</h1>
+  {{ page_header(
+    heading,
+    back_link=url_for('main.service_settings', service_id=current_service.id)
+  ) }}
 
   <div class="grid-row">
     <div class="column-three-quarters">
@@ -18,8 +22,7 @@
       {{ textbox(form.password) }}
       {{ page_footer(
         'Confirm',
-        destructive=destructive,
+        destructive=destructive
-        back_link=url_for('.service_settings', service_id=current_service.id)
       ) }}
     {% endcall %}
     </div>

app/templates/views/service-settings/contact_link.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radio %}
 {% from "components/select-input.html" import select_wrapper %}
@@ -12,9 +13,10 @@
 {% block maincolumn_content %}
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">
+      {{ page_header(
-        {{ 'Change' if 'upload_document' in current_service.permissions else 'Add' }} contact details for ‘Download your document’ page
+        '{} contact details for ‘Download your document’ page'.format('Change' if 'upload_document' in current_service.permissions else 'Add'),
-      </h1>
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       <p>
         When you send users a document to download, you need to include the contact details for your service
         on the download page. This is so users can contact you if there’s a problem (for example,
@@ -33,11 +35,7 @@
           {% endfor %}
         {% endcall %}
 
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/data-retention/add.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/radios.html" import radios %}
@@ -10,16 +11,15 @@
 
 {% block maincolumn_content %}
 
+    {{ page_header(
+      'Set data retention',
+      back_link=url_for('.add_data_retention', service_id=current_service.id)
+    ) }}
 
-  <h1 class="heading-large">Set data retention</h1>
     {% call form_wrapper() %}
       {{ radios(form.notification_type) }}
-      {{  textbox(form.days_of_retention) }}
+      {{ textbox(form.days_of_retention) }}
-      {{ page_footer(
+      {{ page_footer('Add') }}
-      'Add',
-      back_link=url_for('.add_data_retention', service_id=current_service.id),
-      back_link_text='Back'
-    ) }}
     {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/data-retention/edit.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/radios.html" import radios %}
@@ -10,16 +11,14 @@
 
 {% block maincolumn_content %}
 
-
+    {{ page_header(
-  <h1 class="heading-large">Set data retention</h1>
+      'Set data retention',
+      back_link=url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=data_retention_id)
+    ) }}
     {% call form_wrapper() %}
       {{ notification_type | capitalize}}
       {{  textbox(form.days_of_retention) }}
-      {{ page_footer(
+      {{ page_footer('Save') }}
-      'Save',
-      back_link=url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=data_retention_id),
-      back_link_text='Back'
-    ) }}
     {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/email-reply-to/add.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Add email reply-to address
+    'Add email reply-to address',
-  </h1>
+    back_link=url_for('main.service_email_reply_to', service_id=current_service.id)
+  ) }}
   <p>
     Let recipients send replies to a shared inbox that’s managed by your team.
   </p>
@@ -30,11 +32,7 @@
         {{ checkbox(form.is_default) }}
       </div>
     {% endif %}
-    {{ page_footer(
+    {{ page_footer('Add') }}
-      'Add',
-      back_link=url_for('.service_email_reply_to', service_id=current_service.id),
-      back_link_text='Back'
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/email-reply-to/edit.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -11,9 +12,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Edit email reply to address
+    'Edit email reply to address',
-  </h1>
+    back_link=url_for('main.service_email_reply_to', service_id=current_service.id)
+  ) }}
   {% call form_wrapper() %}
     {{ textbox(
       form.email_address,
@@ -24,19 +26,13 @@
       <p class="form-group">
         This is the default reply-to address for {{ current_service.name }} emails
       </p>
-      {{ page_footer(
+      {{ page_footer('Save') }}
-        'Save',
-        back_link=url_for('.service_email_reply_to', service_id=current_service.id),
-        back_link_text='Back'
-      ) }}
     {% else %}
       <div class="form-group">
         {{ checkbox(form.is_default) }}
       </div>
       {{ page_footer(
         'Save',
-        back_link=url_for('.service_email_reply_to', service_id=current_service.id),
-        back_link_text='Back',
         delete_link=url_for('.service_confirm_delete_email_reply_to', service_id=current_service.id, reply_to_email_id=reply_to_email_address_id),
         delete_link_text='Delete'
       ) }}

app/templates/views/service-settings/email_reply_to.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
 
@@ -9,9 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Email reply-to addresses
+    'Email reply-to addresses',
-  </h1>
+    back_link=url_for('main.service_settings', service_id=current_service.id)
+  ) }}
 
   <div class="user-list">
     {% if not current_service.email_reply_to_addresses %}

app/templates/views/service-settings/estimate-usage.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radios %}
 {% from "components/textbox.html" import textbox %}
@@ -19,7 +20,10 @@
           </h1>
         {% endcall %}
       {% else %}
-        <h1 class="heading-large">Tell us how many messages you expect to send</h1>
+        {{ page_header(
+          'Tell us how many messages you expect to send',
+          back_link=url_for('main.request_to_go_live', service_id=current_service.id)
+        ) }}
       {% endif %}
       {% call form_wrapper() %}
         <div class="form-group">

app/templates/views/service-settings/letter-contact-details.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
 
@@ -9,12 +10,11 @@
 
 {% block maincolumn_content %}
 
-  <div class="grid-row bottom-gutter">
+  <div class="bottom-gutter">
-    <div class="column-two-thirds">
+    {{ page_header(
-      <h1 class="heading-large">
+      'Sender addresses',
-        Sender addresses
+      back_link=url_for('main.service_settings', service_id=current_service.id)
-      </h1>
+    ) }}
-    </div>
   </div>
   <div class="user-list">
     {% if not letter_contact_details %}

app/templates/views/service-settings/letter-contact/add.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Add a new address
+    'Add a new address',
-  </h1>
+    back_link=None if request.args.get('from_template') else url_for('.service_letter_contact_details', service_id=current_service.id)
+  ) }}
   <div class="grid-row">
     <div class="column-whole">
       {% call form_wrapper() %}
@@ -29,11 +31,7 @@
             {{ checkbox(form.is_default) }}
           </div>
         {% endif %}
-        {{ page_footer(
+        {{ page_footer('Add') }}
-          'Add',
-          back_link=None if request.args.get('from_template') else url_for('.service_letter_contact_details', service_id=current_service.id),
-          back_link_text='Back'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/letter-contact/edit.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,34 +11,29 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Edit an address
+    'Edit an address',
-  </h1>
+    back_link=None if request.args.get('from_template') else url_for('.service_letter_contact_details', service_id=current_service.id)
-  <div class="grid-row">
+  ) }}
-    {% call form_wrapper() %}
+  {% call form_wrapper() %}
-      {{ textbox(
+    {{ textbox(
-        form.letter_contact_block,
+      form.letter_contact_block,
-        label='This will appear as the ‘sender’ address on your letters.'|safe,
+      label='This will appear as the ‘sender’ address on your letters.'|safe,
-        hint='10 lines maximum',
+      hint='10 lines maximum',
-        width='1-1',
+      width='1-2',
-        rows=10,
+      rows=10,
-        highlight_tags=True
+      highlight_tags=True
-      ) }}
+    ) }}
-      {% if form.is_default.data %}
+    {% if form.is_default.data %}
-        <p class="form-group">
+      <p class="form-group">
-          This is currently your default address for {{ current_service.name }}
+        This is currently your default address for {{ current_service.name }}
-        </p>
+      </p>
-      {% else %}
+    {% else %}
-        <div class="form-group">
+      <div class="form-group">
-          {{ checkbox(form.is_default) }}
+        {{ checkbox(form.is_default) }}
-        </div>
+      </div>
-      {% endif %}
+    {% endif %}
-      {{ page_footer(
+    {{ page_footer('Save') }}
-        'Save',
+  {% endcall %}
-        back_link=None if request.args.get('from_template') else url_for('.service_letter_contact_details', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
-    {% endcall %}
-  </div>
 
 {% endblock %}

app/templates/views/service-settings/link-service-to-organisation.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -11,20 +12,17 @@
 
   <div class="grid-row bottom-gutter">
     <div class="column-two-thirds">
-      <h1 class="heading-large">
+      {{ page_header(
-        Link service to organisation
+        'Link service to organisation',
-      </h1>
+        back_link=url_for('.service_settings', service_id=current_service.id)
+      ) }}
       {% call form_wrapper() %}
         {% if has_organisations %}
           {{ radios(form.organisations) }}
+          {{ page_footer('Save') }}
         {% else %}
         <p> No organisations </p>
         {% endif %}
-        {{ page_footer(
-          'Save' if has_organisations,
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/name.html

@@ -1,6 +1,7 @@
 
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change your service name</h1>
+  {{ page_header(
+    'Change your service name',
+    back_link=url_for('main.service_settings', service_id=current_service.id)
+  ) }}
 
   <div class="form-group">
     {% if current_service.prefix_sms %}
@@ -26,11 +30,7 @@
 
   {% call form_wrapper() %}
     {{ textbox(form.name) }}
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      'Save',
-      back_link=url_for('.service_settings', service_id=current_service.id),
-      back_link_text='Back to settings'
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/request-letter-branding.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -8,7 +9,11 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Letter branding</h1>
+  {{ page_header(
+    'Letter branding',
+    back_link=url_for('.view_template', service_id=current_service.id, template_id=from_template) if from_template else url_for('.service_settings', service_id=current_service.id)
+  ) }}
+
   <div class="grid-row">
     <div class="column-three-quarters">
       {% if current_service.letter_branding_id %}
@@ -28,17 +33,6 @@
           if you want to add your organisation’s logo.
         </p>
       {% endif %}
-      {% if from_template %}
-        {{ page_footer(
-          back_link=url_for('.view_template', service_id=current_service.id, template_id=from_template),
-          back_link_text='Back to template'
-        ) }}
-      {% else %}
-        {{ page_footer(
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
-      {% endif %}
     </div>
   </div>
 

app/templates/views/service-settings/request-to-go-live.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/task-list.html" import task_list_wrapper, task_list_item %}
 
@@ -10,7 +11,10 @@
 {% block maincolumn_content %}
   <div class="grid-row">
     <div class="column-whole">
-      <h1 class="heading-large">Before you request to go live</h1>
+      {{ page_header(
+        'Before you request to go live',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       {% call task_list_wrapper() %}
         {{ task_list_item(
           current_service.has_estimated_usage,

app/templates/views/service-settings/set-auth-type.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -10,7 +11,10 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Sign-in method</h1>
+      {{ page_header(
+        'Sign-in method',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       {% if 'email_auth' in current_service.permissions %}
         <p class="heading-small bottom-gutter-2-3">
           Email link or text message code
@@ -34,10 +38,6 @@
           please <a href="{{ url_for('.support') }}">contact us</a>.
         </p>
       {% endif %}
-      {{ page_footer(
-        back_link=url_for('.service_settings', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
     </div>
   </div>
 

app/templates/views/service-settings/set-email-branding.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
-{% from "components/page-footer.html" import page_footer %}
+{% from "components/page-header.html" import page_header %}
+{% from "components/page-footer.html" import page_footer, sticky_page_footer %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Set email branding</h1>
+  {{ page_header(
+    'Set email branding',
+    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="column-full preview-pane">
@@ -22,13 +26,7 @@
         {{ radios(form.branding_style) }}
       </div>
     </div>
-    <div class="js-stick-at-bottom-when-scrolling">
+    {{ sticky_page_footer('Preview') }}
-      {{ page_footer(
-        'Preview',
-        back_link=url_for('.service_settings', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
-    </div>
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/set-email.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radios %}
 
@@ -11,17 +12,16 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Send emails</h1>
+      {{ page_header(
+        'Send emails',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       <p>
         It’s free to send emails through GOV.UK Notify.
       </p>
       {% call form_wrapper() %}
         {{ radios(form.enabled) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/set-free-sms-allowance.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,13 +11,12 @@
 {% block maincolumn_content %}
 
   {% call form_wrapper() %}
-    <h1 class="heading-large">Free text message allowance</h1>
+    {{ page_header(
-    {{ textbox(form.free_sms_allowance) }}
+      'Free text message allowance',
-    {{ page_footer(
+      back_link=url_for('.service_settings', service_id=current_service.id)
-      'Save',
-      back_link=url_for('.service_settings', service_id=current_service.id),
-      back_link_text='Back to settings'
     ) }}
+    {{ textbox(form.free_sms_allowance) }}
+    {{ page_footer('Save') }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/set-inbound-number.html

@@ -1,35 +1,27 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radios%}
 {% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
-  Set Inbound Number
+  Set inbound number
 {% endblock %}
 
 {% block maincolumn_content %}
-    <h1 class="heading-large">Set Inbound Number</h1>
+    {{ page_header(
+      'Set inbound number',
+      back_link=url_for('.service_settings', service_id=current_service.id)
+    ) }}
     {% if current_service.has_inbound_number %}
     <p> This service already has an inbound number </p>
-    {{ page_footer(
-	    back_link=url_for('.service_settings', service_id=current_service.id),
-	    back_link_text='Back to settings'
-	  ) }}
     {% elif no_available_numbers %}
     <p> No available inbound numbers </p>
-    {{ page_footer(
-	    back_link=url_for('.service_settings', service_id=current_service.id),
-	    back_link_text='Back to settings'
-	  ) }}
     {% else %}
     {% call form_wrapper() %}
 	    {{ radios(form.inbound_number) }}
-	    {{ page_footer(
+	    {{ page_footer('Save') }}
-		    'Save',
-		    back_link=url_for('.service_settings', service_id=current_service.id),
-		    back_link_text='Back'
-  	 	) }}
   	{% endcall %}
 	{% endif %}
 

app/templates/views/service-settings/set-inbound-sms.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -10,14 +11,17 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Receive text messages</h1>
+      {{ page_header(
+        'Receive text messages',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       {% if 'inbound_sms' in current_service.permissions %}
         <p>
           Your service can receive text messages sent to {{ current_service.inbound_number }}.
         </p>
         <p>
-          If you want to turn this feature off,
+          If you want to switch this feature off,
-          <a href="{{ url_for('.support') }}">get in touch with the GOV.UK Notify team</a>.
+          <a href="{{ url_for('.support') }}">get in touch with the GOV.UK&nbsp;Notify team</a>.
         </p>
         {% if current_user.has_permissions('manage_api_keys') %}
           <p>
@@ -38,10 +42,6 @@
           messaging a mobile number.
         </p>
       {% endif %}
-      {{ page_footer(
-        back_link=url_for('.service_settings', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
     </div>
   </div>
 

app/templates/views/service-settings/set-international-sms.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -11,7 +12,10 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">International text messages</h1>
+      {{ page_header(
+        'International text messages',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       <p>
         Messages to international mobile numbers are charged at 1, 2, or
         3 times the cost of messages to UK mobile numbers.</p>
@@ -21,11 +25,7 @@
       </p>
       {% call form_wrapper() %}
         {{ radios(form.enabled) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          button_text="Save",
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/set-letter-branding.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Set letter branding</h1>
+  {{ page_header(
+    'Set letter branding',
+    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="column-full preview-pane">
@@ -23,11 +27,7 @@
       </div>
     </div>
     <div class="js-stick-at-bottom-when-scrolling">
-      {{ page_footer(
+      {{ page_footer('Preview') }}
-        'Preview',
-        back_link=url_for('.service_settings', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
     </div>
   {% endcall %}
 

app/templates/views/service-settings/set-letter-contact-block.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,9 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Letter contact details
+    'Letter contact details',
-  </h1>
+    back_link=None if request.args.get('from_template') else url_for('.service_settings', service_id=current_service.id)
+  ) }}
   <div class="grid-row">
     {% call form_wrapper(class="column-half") %}
       {{ textbox(
@@ -22,11 +24,7 @@
         rows=10,
         highlight_tags=True
       ) }}
-      {{ page_footer(
+      {{ page_footer('Save') }}
-        'Save',
-        back_link=None if request.args.get('from_template') else url_for('.service_settings', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
     {% endcall %}
   </div>
 

app/templates/views/service-settings/set-letter.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -11,7 +12,10 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Send letters</h1>
+      {{ page_header(
+        'Send letters',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       <p>
         It costs between 30p and 76p to send a letter using Notify.
       </p>
@@ -21,11 +25,7 @@
       </p>
       {% call form_wrapper() %}
         {{ radios(form.enabled) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/set-organisation-type.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,15 +10,14 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Set organisation type</h1>
+    {{ page_header(
+      'Set organisation type',
+      back_link=url_for('.service_settings', service_id=current_service.id)
+    ) }}
+
     {% call form_wrapper() %}
       {{ radios(form.organisation_type) }}
-      {{ page_footer(
+      {{ page_footer('Save') }}
-        'Save',
-        back_link=url_for('.service_settings', service_id=current_service.id),
-        back_link_text='Back to settings'
-      ) }}
     {% endcall %}
-  </div>
 
 {% endblock %}

app/templates/views/service-settings/set-reply-to-email.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,9 +10,11 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Email reply-to address
+    'Email reply-to address',
-  </h1>
+    back_link=url_for('.service_settings', service_id=current_service.id)
+  ) }}
+
   <p>
     Your emails will be sent from
     {{ current_service.email_from }}@notifications.service.gov.uk.
@@ -33,11 +36,7 @@
       width='2-3',
       safe_error_message=True
     ) }}
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      'Save',
-      back_link=url_for('.service_settings', service_id=current_service.id),
-      back_link_text='Back to settings'
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/set-service-setting.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -11,14 +12,13 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">{{ title }}</h1>
+      {{ page_header(
+        title,
+        back_link=url_for('.service_settings', service_id=current_service.id)
+      ) }}
       {% call form_wrapper() %}
         {{ radios(form.enabled, hide_legend=True) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/set-sms.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radios %}
 
@@ -11,7 +12,10 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Send text messages</h1>
+      {{ page_header(
+        'Send text messages',
+        back_link=url_for('main.service_settings', service_id=current_service.id)
+      ) }}
       <p>
         You have a free allowance of
         {{ '{:,}'.format(current_service.free_sms_fragment_limit) }} text messages each
@@ -26,11 +30,7 @@
       </p>
       {% call form_wrapper() %}
         {{ radios(form.enabled) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/service-settings/sms-prefix.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,14 +10,14 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Text messages start with service name</h1>
+  {{ page_header(
+    'Text messages start with service name',
+    back_link=url_for('main.service_settings', service_id=current_service.id)
+  ) }}
+
   {% call form_wrapper() %}
     {{ radios(form.enabled) }}
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      button_text="Save",
-      back_link=url_for('.service_settings', service_id=current_service.id),
-      back_link_text='Back to settings'
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/sms-sender/add.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,11 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Add text message sender</h1>
+  {{ page_header(
+    'Add text message sender',
+    back_link=url_for('main.service_sms_senders', service_id=current_service.id)
+  ) }}
+
   {% call form_wrapper() %}
     {{ textbox(
       form.sms_sender,
@@ -22,11 +27,7 @@
         {{ checkbox(form.is_default) }}
       </div>
     {% endif %}
-    {{ page_footer(
+    {{ page_footer('Save') }}
-      'Save',
-      back_link=url_for('.service_sms_senders', service_id=current_service.id),
-      back_link_text='Back'
-    ) }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/sms-sender/edit.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -11,9 +12,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Edit text message sender
+    'Edit text message sender',
-  </h1>
+    back_link=None if request.args.get('from_template') else url_for('.service_sms_senders', service_id=current_service.id)
+  ) }}
   {% call form_wrapper() %}
     {% if inbound_number %}
       <p>
@@ -31,26 +33,16 @@
       <p class="form-group">
         This is the default text message sender
       </p>
-      {{ page_footer(
+      {{ page_footer('Save') }}
-        'Save',
-        back_link=None if request.args.get('from_template') else url_for('.service_sms_senders', service_id=current_service.id),
-        back_link_text='Back'
-      ) }}
     {% else %}
       <div class="form-group">
         {{ checkbox(form.is_default) }}
       </div>
       {% if inbound_number %}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=None if request.args.get('from_template') else url_for('.service_sms_senders', service_id=current_service.id),
-          back_link_text='Back'
-        ) }}
       {% else %}
         {{ page_footer(
           'Save',
-          back_link=None if request.args.get('from_template') else url_for('.service_sms_senders', service_id=current_service.id),
-          back_link_text='Back',
           delete_link=url_for('.service_confirm_delete_sms_sender', service_id=current_service.id, sms_sender_id=sms_sender_id),
           delete_link_text='Delete'
         ) }}

app/templates/views/service-settings/sms-senders.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context%}
 
@@ -9,9 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  {{ page_header(
-    Text message senders
+    'Text message senders',
-  </h1>
+    back_link=url_for('main.service_settings', service_id=current_service.id)
+  ) }}
 
   <div class="user-list">
     {% if not current_service.sms_senders %}

app/templates/views/styleguide.html

@@ -101,7 +101,7 @@
   ) }}
 
   {{ page_footer(
-    button_text='Send', back_link='http://example.com', back_link_text="Back to dashboard"
+    button_text='Send'
   ) }}
 
   {{ page_footer(

app/templates/views/templates/action_blocked.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -10,7 +11,21 @@
 
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">{{ notification_type.capitalize() }} are disabled</h1>
+      {% set
+        back_link_dict = {
+          'add_new_template': '.choose_template',
+          'templates': '.choose_template',
+          'view_template': '.view_template'
+        }
+      %}
+      {{ page_header(
+        '{} are disabled'.format(notification_type.capitalize()),
+        back_link=url_for(
+          back_link_dict[return_to],
+          service_id=current_service.id,
+          template_id=template_id
+        )
+      ) }}
       <p>
         Sending {{ notification_type }} has been disabled for your service.
       </p>
@@ -19,28 +34,6 @@
         <a href="{{ url_for('.support') }}">get in touch with the GOV.UK Notify team</a>.
       </p>
 
-      {% set
-        back_link_dict = {
-          'add_new_template': {
-            'url' : '.choose_template', 'text': 'Back to templates'
-          },
-          'templates': {
-            'url' : '.choose_template', 'text' : 'Back to templates'
-          },
-          'view_template': {
-            'url' :'.view_template', 'text' : 'Back to the template'
-          }
-        }
-      %}
-
-      {{ page_footer(
-        back_link=url_for(
-          back_link_dict[return_to]['url'],
-          service_id=current_service.id,
-          template_id=template_id),
-        back_link_text=back_link_dict[return_to]['text']
-        ) }}
-
     </div>
   </div>
 

app/templates/views/templates/breaking-change.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
 {% from "components/list.html" import list_of_placeholders %}
@@ -11,7 +12,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Confirm changes</h1>
+  {{ page_header(
+    'Confirm changes',
+    back_link=url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id)
+  ) }}
 
   <div class="bottom-gutter">
     {% if template_change.placeholders_removed %}
@@ -33,11 +37,7 @@
     <input type="hidden" name="template_id" value="{{ new_template.id }}" />
 
     <input type="hidden" name="confirm" value="true" />
-    {{ page_footer(
+    {{ page_footer('Save changes to template') }}
-      'Save changes to template',
-      back_link=url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id),
-      back_link_text="Back"
-    ) }}
   {% endcall %}
 
   <p>

app/templates/views/templates/edit-template-postage.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radios %}
 {% from "components/form.html" import form_wrapper %}
@@ -9,18 +10,15 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">
+    {{ page_header(
-      Change postage
+      'Change postage',
-    </h1>
+      back_link=url_for('.view_template', service_id=service_id, template_id=template_id)
+    ) }}
     {% call form_wrapper() %}
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ radios(form.postage) }}
-          {{ page_footer(
+          {{ page_footer('Save') }}
-            'Save',
-            back_link=url_for('.view_template', service_id=service_id, template_id=template_id),
-            back_link_text='Back to template'
-          ) }}
         </div>
         <aside class="column-three-quarters">
           {% include "partials/templates/guidance-postage.html" %}

app/templates/views/templates/set-sender.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,7 +10,11 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">{{sender_context['title']}}</h1>
+  {{ page_header(
+    sender_context.title,
+    back_link=url_for('.view_template', service_id=current_service.id, template_id=template_id)
+  ) }}
+
   <div class="grid-row">
     <div class="column-three-quarters">
       {% call form_wrapper() %}
@@ -18,11 +23,7 @@
           option_hints=option_hints,
           hide_legend=True
         ) }}
-        {{ page_footer(
+        {{ page_footer('Continue') }}
-          'Continue',
-          back_link=url_for('.view_template', service_id=current_service.id, template_id=template_id),
-          back_link_text='Back to template'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/templates/set-template-sender.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,7 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Set letter contact block</h1>
+  {{ page_header(
+    'Set letter contact block',
+    back_link=url_for('.view_template', service_id=current_service.id, template_id=template_id)
+  ) }}
   <div class="grid-row">
     <div class="column-three-quarters">
       {% call form_wrapper() %}
@@ -18,11 +22,7 @@
           option_hints=option_hints,
           hide_legend=True
         ) }}
-        {{ page_footer(
+        {{ page_footer('Continue') }}
-          'Continue',
-          back_link=url_for('.view_template', service_id=current_service.id, template_id=template_id),
-          back_link_text='Back to template'
-        ) }}
         {% if no_senders %}
           <a href="{{ url_for('.service_add_letter_contact', service_id=current_service.id, from_template=template_id) }}">Add new sender</a>
         {% endif %}

app/templates/views/user-profile/authenticate.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,17 +10,17 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change your {{ thing }}</h1>
+  {{ page_header(
+    'Change your {}'.format(thing),
+    back_link=back_link
+  ) }}
 
   <div class="grid-row">
     <div class="column-three-quarters">
 
     {% call form_wrapper(autocomplete=True) %}
       {{ textbox(form.password) }}
-      {{ page_footer(
+      {{ page_footer('Confirm') }}
-        'Confirm',
-        back_link=back_link
-      ) }}
     {% endcall %}
     </div>
   </div>

app/templates/views/user-profile/change-password.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,18 +10,17 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">Change your password</h1>
+  {{ page_header(
+    'Change your password',
+    back_link=url_for('.user_profile')
+  ) }}
 
   <div class="grid-row">
     <div class="column-three-quarters">
       {% call form_wrapper(autocomplete=True) %}
         {{ textbox(form.old_password) }}
         {{ textbox(form.new_password) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          secondary_link=url_for('.user_profile'),
-          secondary_link_text="Back to your profile"
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/user-profile/change.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,22 +10,16 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change your {{ thing }}</h1>
+  {{ page_header(
+    'Change your {}'.format(thing),
+    back_link=url_for('.user_profile')
+  ) }}
 
   <div class="grid-row">
-    {% if preamble %}
-      <p>
-        {{ preamble }}
-      </p>
-    {% endif %}
     <div class="column-three-quarters">
       {% call form_wrapper() %}
         {{ textbox(form_field, safe_error_message=True) }}
-        {{ page_footer(
+        {{ page_footer('Save') }}
-          'Save',
-          back_link=url_for('.user_profile'),
-          back_link_text="Back to your profile"
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/user-profile/confirm.html

@@ -1,5 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -9,7 +10,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Change your {{ thing }}</h1>
+  {{ page_header(
+    'Change your {}'.format(thing),
+    back_link=url_for('.user_profile')
+  ) }}
 
   <div class="grid-row">
     <div class="column-three-quarters">
@@ -22,11 +26,7 @@
           width='5em',
           autofocus=True
         ) }}
-        {{ page_footer(
+        {{ page_footer('Confirm') }}
-          'Confirm',
-          destructive=destructive,
-          back_link=url_for('.user_profile')
-        ) }}
       {% endcall %}
     </div>
   </div>

tests/app/main/views/test_api_integration.py

@@ -646,7 +646,7 @@ def test_back_link_directs_to_api_integration_from_delivery_callback_if_no_inbou
         _follow_redirects=True,
     )
 
-    assert page.select_one('.page-footer-back-link')['href'] == url_for(
+    assert page.select_one('.govuk-back-link')['href'] == url_for(
         expected_link, service_id=service_one['id']
     )
 

tests/app/main/views/test_send.py

@@ -261,8 +261,8 @@ def test_should_not_allow_files_to_be_uploaded_without_the_correct_permission(
     )
 
     assert page.select('main p')[0].text.strip() == "Sending text messages has been disabled for your service."
-    assert page.select(".page-footer-back-link")[0].text == "Back to the template"
+    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".page-footer-back-link")[0]['href'] == url_for(
+    assert page.select(".govuk-back-link")[0]['href'] == url_for(
         '.view_template',
         service_id=service_one['id'],
         template_id=template_id,
@@ -1033,8 +1033,8 @@ def test_send_one_off_does_not_send_without_the_correct_permissions(
     )
 
     assert page.select('main p')[0].text.strip() == "Sending text messages has been disabled for your service."
-    assert page.select(".page-footer-back-link")[0].text == "Back to the template"
+    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".page-footer-back-link")[0]['href'] == url_for(
+    assert page.select(".govuk-back-link")[0]['href'] == url_for(
         '.view_template',
         service_id=service_one['id'],
         template_id=template_id,
@@ -1239,8 +1239,8 @@ def test_skip_link_will_not_show_on_sms_one_off_if_service_has_no_mobile_number(
 
 
 @pytest.mark.parametrize('user, link_index', (
-    (active_user_with_permissions, 1),
+    (active_user_with_permissions, 2),
-    (active_caseworking_user, 0),
+    (active_caseworking_user, 1),
 ))
 def test_send_one_off_offers_link_to_upload(
     client_request,
@@ -1259,8 +1259,11 @@ def test_send_one_off_offers_link_to_upload(
         _follow_redirects=True,
     )
 
+    back_link = page.select('main a')[0]
     link = page.select('main a')[link_index]
 
+    assert back_link.text.strip() == 'Back'
+
     assert link.text.strip() == 'Upload a list of phone numbers'
     assert link['href'] == url_for(
         'main.send_messages',
@@ -1576,7 +1579,7 @@ def test_send_test_sms_message_with_placeholders_shows_first_field(
 
     assert page.select('label')[0].text.strip() == 'name'
     assert page.select('input')[0]['name'] == 'placeholder_value'
-    assert page.select('.page-footer-back-link')[0]['href'] == url_for(
+    assert page.select('.govuk-back-link')[0]['href'] == url_for(
         expected_back_link_endpoint,
         service_id=SERVICE_ONE_ID,
         **extra_args
@@ -1721,7 +1724,7 @@ def test_send_test_indicates_optional_address_columns(
         'address line 3 '
         'Optional'
     )
-    assert page.select('.page-footer-back-link')[0]['href'] == url_for(
+    assert page.select('.govuk-back-link')[0]['href'] == url_for(
         'main.send_one_off_step',
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
@@ -2393,7 +2396,7 @@ def test_check_messages_back_link(
     )
 
     assert (
-        page.findAll('a', {'class': 'page-footer-back-link'})[0]['href']
+        page.findAll('a', {'class': 'govuk-back-link'})[0]['href']
     ) == expected_url(service_id=SERVICE_ONE_ID, template_id=fake_uuid)
 
 
@@ -2923,7 +2926,7 @@ def test_send_one_off_letter_errors_in_trial_mode(
     assert len(page.select('.letter img')) == 5
 
     assert not page.select('[type=submit]')
-    assert page.select_one('.page-footer-back-link').text == 'Back'
+    assert page.select_one('.govuk-back-link').text == 'Back'
     assert page.select_one('a[download]').text == 'Download as a PDF'
 
 
@@ -3048,7 +3051,7 @@ def test_check_notification_shows_preview(
 
     assert page.h1.text.strip() == 'Preview of ‘Two week reminder’'
     assert (
-        page.findAll('a', {'class': 'page-footer-back-link'})[0]['href']
+        page.findAll('a', {'class': 'govuk-back-link'})[0]['href']
     ) == url_for(
         'main.send_one_off_step',
         service_id=service_one['id'],
@@ -3089,7 +3092,7 @@ def test_check_notification_shows_help(
         template_id=fake_uuid,
         help='3'
     )
-    assert page.select_one('.page-footer-back-link')['href'] == url_for(
+    assert page.select_one('.govuk-back-link')['href'] == url_for(
         'main.send_test',
         service_id=service_one['id'],
         template_id=fake_uuid,

tests/app/main/views/test_service_settings.py

@@ -2127,8 +2127,8 @@ def test_edit_reply_to_email_address(
     ),
     (
         get_default_reply_to_email_address,
-        'Back',
+        None,
-        partial(url_for, '.service_email_reply_to'),
+        None,
     ),
 ])
 def test_shows_delete_link_for_email_reply_to_address(
@@ -2148,10 +2148,18 @@ def test_shows_delete_link_for_email_reply_to_address(
         reply_to_email_id=sample_uuid(),
     )
 
-    last_link = page.select('.page-footer a')[-1]
+    assert page.select_one('.govuk-back-link').text.strip() == 'Back'
+    assert page.select_one('.govuk-back-link')['href'] == url_for(
+        '.service_email_reply_to',
+        service_id=SERVICE_ONE_ID,
+    )
 
-    assert normalize_spaces(last_link.text) == expected_link_text
+    if expected_link_text:
-    assert last_link['href'] == partial_href(service_id=SERVICE_ONE_ID)
+        link = page.select_one('.page-footer a')
+        assert normalize_spaces(link.text) == expected_link_text
+        assert link['href'] == partial_href(service_id=SERVICE_ONE_ID)
+    else:
+        assert not page.select('.page-footer a')
 
 
 def test_confirm_delete_reply_to_email_address(
@@ -2340,8 +2348,8 @@ def test_default_box_shows_on_non_default_sender_details_while_editing(
     ),
     (
         get_default_sms_sender,
-        'Back',
+        None,
-        partial(url_for, '.service_sms_senders'),
+        None,
     ),
 ])
 def test_shows_delete_link_for_sms_sender(
@@ -2361,10 +2369,20 @@ def test_shows_delete_link_for_sms_sender(
         sms_sender_id=sample_uuid(),
     )
 
-    last_link = page.select('.page-footer a')[-1]
+    link = page.select_one('.page-footer a')
+    back_link = page.select_one('.govuk-back-link')
 
-    assert normalize_spaces(last_link.text) == expected_link_text
+    assert back_link.text.strip() == 'Back'
-    assert last_link['href'] == partial_href(service_id=SERVICE_ONE_ID)
+    assert back_link['href'] == url_for(
+        '.service_sms_senders',
+        service_id=SERVICE_ONE_ID,
+    )
+
+    if expected_link_text:
+        assert normalize_spaces(link.text) == expected_link_text
+        assert link['href'] == partial_href(service_id=SERVICE_ONE_ID)
+    else:
+        assert not link
 
 
 def test_confirm_delete_sms_sender(
@@ -2389,8 +2407,8 @@ def test_confirm_delete_sms_sender(
 
 
 @pytest.mark.parametrize('fixture, expected_link_text', [
-    (get_inbound_number_sms_sender, 'Back'),
+    (get_inbound_number_sms_sender, None),
-    (get_default_sms_sender, 'Back'),
+    (get_default_sms_sender, None),
     (get_non_default_sms_sender, 'Delete'),
 ])
 def test_inbound_sms_sender_is_not_deleteable(
@@ -2409,8 +2427,14 @@ def test_inbound_sms_sender_is_not_deleteable(
         sms_sender_id='1234',
     )
 
-    last_link = page.select('.page-footer a')[-1]
+    back_link = page.select_one('.govuk-back-link')
-    assert normalize_spaces(last_link.text) == expected_link_text
+    footer_link = page.select_one('.page-footer a')
+    assert normalize_spaces(back_link.text) == 'Back'
+
+    if expected_link_text:
+        assert normalize_spaces(footer_link.text) == expected_link_text
+    else:
+        assert not footer_link
 
 
 def test_delete_sms_sender(
@@ -2607,12 +2631,17 @@ def test_request_letter_branding(
         **extra_args
     )
     assert request_page.select_one('main p').text.strip() == 'Your letters do not have a logo.'
-    link_href = request_page.select_one('main a')['href']
+    back_link_href = request_page.select('main a')[0]['href']
+    link_href = request_page.select('main a')[1]['href']
+    assert link_href == url_for(
+        'main.feedback',
+        ticket_type='ask-question-give-feedback',
+        body='letter-branding',
+    )
     feedback_page = client_request.get_url(link_href)
     assert feedback_page.select_one('textarea').text.strip() == (
         'I would like my own logo on my letter templates.'
     )
-    back_link_href = request_page.select('main a')[1]['href']
     assert back_link_href == expected_partial_url(service_id=SERVICE_ONE_ID)
 
 
@@ -3837,12 +3866,12 @@ def test_set_inbound_sms_when_inbound_number_is_not_set(
 @pytest.mark.parametrize('user, expected_paragraphs', [
     (active_user_with_permissions, [
         'Your service can receive text messages sent to 07700900123.',
-        'If you want to turn this feature off, get in touch with the GOV.UK Notify team.',
+        'If you want to switch this feature off, get in touch with the GOV.UK Notify team.',
         'You can set up callbacks for received text messages on the API integration page.',
     ]),
     (active_user_no_api_key_permission, [
         'Your service can receive text messages sent to 07700900123.',
-        'If you want to turn this feature off, get in touch with the GOV.UK Notify team.',
+        'If you want to switch this feature off, get in touch with the GOV.UK Notify team.',
     ]),
 ])
 def test_set_inbound_sms_when_inbound_number_is_set(

tests/app/main/views/test_templates.py

@@ -1275,8 +1275,8 @@ def test_should_not_allow_creation_of_template_through_form_without_correct_perm
         _follow_redirects=True,
     )
     assert normalize_spaces(page.select('main p')[0].text) == expected_error
-    assert page.select(".page-footer-back-link")[0].text == "Back to templates"
+    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".page-footer-back-link")[0]['href'] == url_for(
+    assert page.select(".govuk-back-link")[0]['href'] == url_for(
         '.choose_template',
         service_id=SERVICE_ONE_ID,
         template_id='0',
@@ -1301,8 +1301,8 @@ def test_should_not_allow_creation_of_a_template_without_correct_permission(
     )
     assert page.select('main p')[0].text.strip() == \
         "Sending {} has been disabled for your service.".format(template_description[type_of_template])
-    assert page.select(".page-footer-back-link")[0].text == "Back to templates"
+    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".page-footer-back-link")[0]['href'] == url_for(
+    assert page.select(".govuk-back-link")[0]['href'] == url_for(
         '.choose_template',
         service_id=service_one['id'],
         template_id='0',
@@ -1418,8 +1418,8 @@ def test_should_not_allow_template_edits_without_correct_permission(
     )
 
     assert page.select('main p')[0].text.strip() == "Sending text messages has been disabled for your service."
-    assert page.select(".page-footer-back-link")[0].text == "Back to the template"
+    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".page-footer-back-link")[0]['href'] == url_for(
+    assert page.select(".govuk-back-link")[0]['href'] == url_for(
         '.view_template',
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
@@ -1539,7 +1539,7 @@ def test_should_show_interstitial_when_making_breaking_change(
     )
 
     assert page.h1.string.strip() == "Confirm changes"
-    assert page.find('a', {'class': 'page-footer-back-link'})['href'] == url_for(
+    assert page.find('a', {'class': 'govuk-back-link'})['href'] == url_for(
         ".edit_service_template",
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,