From 9355b1856c786f175465d4ea2c0738632ce29cef Mon Sep 17 00:00:00 2001
From: Brett Kyle <22524634+domoscargin@users.noreply.github.com>
Date: Wed, 8 Jul 2026 16:31:55 +0100
Subject: [PATCH 1/3] [SPIKE] Collapse language switcher on mobile

---
 packages/govuk-frontend/src/govuk/all.mjs     |   1 +
 .../components/language-switcher/_mixin.scss  |  87 ++++++--
 .../language-switcher/language-switcher.mjs   | 196 ++++++++++++++++++
 .../language-switcher/language-switcher.yaml  |  16 ++
 .../components/language-switcher/template.njk |  18 +-
 .../service-navigation.yaml                   |  24 ++-
 .../src/govuk/init.jsdom.test.mjs             |   2 +
 packages/govuk-frontend/src/govuk/init.mjs    |   2 +
 .../tasks/build/package.unit.test.mjs         |   1 +
 9 files changed, 327 insertions(+), 20 deletions(-)
 create mode 100644 packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.mjs

diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs
index f0fd0ba0f0..6ea3c02219 100644
--- a/packages/govuk-frontend/src/govuk/all.mjs
+++ b/packages/govuk-frontend/src/govuk/all.mjs
@@ -6,6 +6,7 @@ export { Checkboxes } from './components/checkboxes/checkboxes.mjs'
 export { ErrorSummary } from './components/error-summary/error-summary.mjs'
 export { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs'
 export { FileUpload } from './components/file-upload/file-upload.mjs'
+export { LanguageSwitcher } from './components/language-switcher/language-switcher.mjs'
 export { NotificationBanner } from './components/notification-banner/notification-banner.mjs'
 export { PasswordInput } from './components/password-input/password-input.mjs'
 export { Radios } from './components/radios/radios.mjs'
diff --git a/packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss b/packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss
index 77a86cf7fb..44f204d6c1 100644
--- a/packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss
+++ b/packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss
@@ -10,28 +10,87 @@
     color: base.govuk-functional-colour(text);
   }
 
-  .govuk-language-switcher__list {
+  // Modifier to remove the top margin on small viewports. Intended for use when
+  // the switcher is in the service navigation. Kept as a modifier so the style is
+  // not dependent on another component.
+  .govuk-language-switcher--no-top-margin {
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      margin-top: 0;
+    }
+  }
+
+  // Menu toggle button, shown on mobile when JavaScript is available. These
+  // styles deliberately mirror the service navigation menu toggle.
+  .govuk-language-switcher__toggle {
+    @include base.govuk-font($size: 19, $weight: bold);
     display: inline-flex;
-    flex-wrap: wrap;
-    row-gap: base.govuk-spacing(1);
+    align-items: center;
+    margin: base.govuk-spacing(2) 0;
+    padding: 0;
+    border: 0;
+    color: base.govuk-functional-colour(link);
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+
+    &:focus {
+      @include base.govuk-focused-text;
+    }
+
+    &::after {
+      @include base.govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: base.govuk-spacing(1);
+    }
+
+    &[aria-expanded="true"]::after {
+      @include base.govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // Icon shown before the toggle button text
+  .govuk-language-switcher__toggle-icon {
+    flex-shrink: 0;
+    margin-right: base.govuk-spacing(1);
+  }
+
+  .govuk-language-switcher__list {
     margin: 0;
     padding: 0;
     list-style-type: none;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: inline-flex;
+      flex-wrap: wrap;
+      row-gap: base.govuk-spacing(1);
+    }
   }
 
   .govuk-language-switcher__list-item {
-    display: flex;
-    align-items: center;
+    // On mobile, stack the language items vertically, matching the service
+    // navigation menu
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      margin: base.govuk-spacing(2) 0;
+    }
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: flex;
+      align-items: center;
 
-    &:not(:last-child) {
-      &::after {
-        content: "";
-        display: block;
-        height: 1em;
-        margin-right: base.govuk-spacing(2);
-        margin-left: base.govuk-spacing(2);
-        border-right: 1px solid;
-        border-right-color: base.govuk-functional-colour(secondary-text);
+      &:not(:last-child) {
+        &::after {
+          content: "";
+          display: block;
+          height: 1em;
+          margin-right: base.govuk-spacing(2);
+          margin-left: base.govuk-spacing(2);
+          border-right: 1px solid;
+          border-right-color: base.govuk-functional-colour(secondary-text);
+        }
       }
     }
   }
diff --git a/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.mjs b/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.mjs
new file mode 100644
index 0000000000..236e77d1fb
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.mjs
@@ -0,0 +1,196 @@
+import { getBreakpoint } from '../../common/index.mjs'
+import { Component } from '../../component.mjs'
+import { ElementError } from '../../errors/index.mjs'
+
+/**
+ * Language switcher component
+ *
+ * On mobile, collapses the list of languages into a menu behind a toggle
+ * button, mirroring the behaviour of the service navigation menu.
+ *
+ * @preserve
+ */
+export class LanguageSwitcher extends Component {
+  /** @private */
+  $menuButton
+
+  /** @private */
+  $menu
+
+  /**
+   * Remember the open/closed state of the menu so we can maintain it when the
+   * screen is resized.
+   *
+   * @private
+   */
+  menuIsOpen = false
+
+  /**
+   * A global const for storing a matchMedia instance which we'll use to detect
+   * when a screen size change happens. We rely on it being null if the feature
+   * isn't available to initially apply hidden attributes
+   *
+   * @private
+   * @type {MediaQueryList | null}
+   */
+  mql = null
+
+  /**
+   * @param {Element | null} $root - HTML element to use for the language switcher
+   */
+  constructor($root) {
+    super($root)
+
+    const $menuButton = this.$root.querySelector(
+      '.govuk-js-language-switcher-toggle'
+    )
+
+    // The toggle button may be omitted when writing plain HTML, in which case
+    // the list of languages is always shown
+    if (!$menuButton) {
+      return this
+    }
+
+    const menuId = $menuButton.getAttribute('aria-controls')
+    if (!menuId) {
+      throw new ElementError({
+        component: LanguageSwitcher,
+        identifier:
+          'Menu button (`<button class="govuk-js-language-switcher-toggle">`) attribute (`aria-controls`)'
+      })
+    }
+
+    const $menu = document.getElementById(menuId)
+    if (!$menu) {
+      throw new ElementError({
+        component: LanguageSwitcher,
+        element: $menu,
+        identifier: `Language list (\`<ul id="${menuId}">\`)`
+      })
+    }
+
+    this.$menu = $menu
+    this.$menuButton = $menuButton
+
+    this.setupResponsiveChecks()
+
+    this.$menuButton.addEventListener('click', () =>
+      this.handleMenuButtonClick()
+    )
+  }
+
+  /**
+   * Setup viewport resize check
+   *
+   * @private
+   */
+  setupResponsiveChecks() {
+    const breakpoint = getBreakpoint('tablet')
+
+    if (!breakpoint.value) {
+      throw new ElementError({
+        component: LanguageSwitcher,
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
+      })
+    }
+
+    // Media query list for GOV.UK Frontend desktop breakpoint
+    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`)
+
+    // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
+    // to be able to fall back to the deprecated MediaQueryList.addListener
+    if ('addEventListener' in this.mql) {
+      this.mql.addEventListener('change', () => this.checkMode())
+    } else {
+      // @ts-expect-error Property 'addListener' does not exist
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.mql.addListener(() => this.checkMode())
+    }
+
+    this.checkMode()
+  }
+
+  /**
+   * Sync menu state
+   *
+   * Uses the variable menuIsOpen to correctly set the accessible and
+   * visual states of the menu and the menu button.
+   * Additionally will force the menu to be visible and the menu button to be
+   * hidden if the matchMedia is triggered to desktop.
+   *
+   * @private
+   */
+  checkMode() {
+    if (!this.mql || !this.$menu || !this.$menuButton) {
+      return
+    }
+
+    if (this.mql.matches) {
+      this.$menu.removeAttribute('hidden')
+      setAttributes(this.$menuButton, attributesForHidingButton)
+    } else {
+      removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton))
+      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString())
+
+      if (this.menuIsOpen) {
+        this.$menu.removeAttribute('hidden')
+      } else {
+        this.$menu.setAttribute('hidden', '')
+      }
+    }
+  }
+
+  /**
+   * Handle menu button click
+   *
+   * When the menu button is clicked, change the visibility of the menu and then
+   * sync the accessibility state and menu button state
+   *
+   * @private
+   */
+  handleMenuButtonClick() {
+    this.menuIsOpen = !this.menuIsOpen
+    this.checkMode()
+  }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  static moduleName = 'govuk-language-switcher'
+}
+
+/**
+ * Collection of attributes that needs setting on a `<button>`
+ * to fully hide it, both visually and from screen-readers,
+ * and prevent its activation while hidden
+ */
+const attributesForHidingButton = {
+  hidden: '',
+  // Fix button still appearing in VoiceOver's form control's menu despite being hidden
+  // https://bugs.webkit.org/show_bug.cgi?id=300899
+  'aria-hidden': 'true'
+}
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+  for (const attributeName in attributes) {
+    $element.setAttribute(attributeName, attributes[attributeName])
+  }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+  for (const attributeName of attributeNames) {
+    $element.removeAttribute(attributeName)
+  }
+}
diff --git a/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.yaml b/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.yaml
index d9ca934f5e..6ea900e4ac 100644
--- a/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.yaml
+++ b/packages/govuk-frontend/src/govuk/components/language-switcher/language-switcher.yaml
@@ -40,6 +40,22 @@ params:
     type: string
     required: false
     description: Plain text label identifying the navigation landmark to screen readers. Write it in the language of the current page. Defaults to "Language switcher".
+  - name: menuButtonText
+    type: string
+    required: false
+    description: The text of the button that opens the mobile menu. Write it in the language of the current page. Defaults to "Languages".
+  - name: menuButtonLabel
+    type: string
+    required: false
+    description: The screen reader label for the button that opens the mobile menu, when it is different to the text of the button. Defaults to the same value as `menuButtonText`.
+  - name: listId
+    type: string
+    required: false
+    description: The ID used to associate the mobile menu button with the list of languages it controls. Defaults to "language-switcher-list".
+  - name: collapseOnMobile
+    type: boolean
+    required: false
+    description: Setting this to `false` stops the list of languages from being collapsed into a menu on mobile, keeping it always visible. Defaults to `true` when there is more than one language.
   - name: classes
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/language-switcher/template.njk b/packages/govuk-frontend/src/govuk/components/language-switcher/template.njk
index 1ef053eed1..dc96ae7380 100644
--- a/packages/govuk-frontend/src/govuk/components/language-switcher/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/language-switcher/template.njk
@@ -1,7 +1,21 @@
 {% from "../../macros/attributes.njk" import govukAttributes %}
 
-<nav class="govuk-language-switcher {%- if params.classes %} {{ params.classes }}{% endif %}" {{- govukAttributes(params.attributes) }} aria-label="{{ params.ariaLabel | default("Language switcher") }}">
-  <ul class="govuk-language-switcher__list">
+{%- set menuButtonText = params.menuButtonText | default("Languages", true) -%}
+{%- set listId = params.listId | default("language-switcher-list", true) -%}
+{%- set collapseOnMobile = params.collapseOnMobile | default(params.items.length > 1) -%}
+
+<nav class="govuk-language-switcher {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-language-switcher" {{- govukAttributes(params.attributes) }} aria-label="{{ params.ariaLabel | default("Language switcher") }}">
+  {% if collapseOnMobile %}
+  <button type="button" class="govuk-language-switcher__toggle govuk-js-language-switcher-toggle" aria-controls="{{ listId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden aria-hidden="true">
+    <svg class="govuk-language-switcher__toggle-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" focusable="false" aria-hidden="true">
+      <circle cx="9" cy="9" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+      <ellipse cx="9" cy="9" rx="3.5" ry="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+      <path d="M1.5 6h15M1.5 12h15" fill="none" stroke="currentColor" stroke-width="1.5"/>
+    </svg>
+    {{ menuButtonText }}
+  </button>
+  {% endif %}
+  <ul class="govuk-language-switcher__list" id="{{ listId }}">
 {% for item in params.items %}
   {% set isCurrent = item.current or (not item.href) %}
   {% if isCurrent %}
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml
index 45e0e4ca54..b4aa75e120 100644
--- a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.yaml
@@ -396,8 +396,16 @@ examples:
           text: Navigation item 3
       slots:
         end: |-
-          <nav class="govuk-language-switcher" aria-label="Language switcher">
-            <ul class="govuk-language-switcher__list">
+          <nav class="govuk-language-switcher govuk-language-switcher--no-top-margin" data-module="govuk-language-switcher" aria-label="Language switcher">
+            <button type="button" class="govuk-language-switcher__toggle govuk-js-language-switcher-toggle" aria-controls="language-switcher-list" hidden aria-hidden="true">
+              <svg class="govuk-language-switcher__toggle-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" focusable="false" aria-hidden="true">
+                <circle cx="9" cy="9" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <ellipse cx="9" cy="9" rx="3.5" ry="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M1.5 6h15M1.5 12h15" fill="none" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+              Languages
+            </button>
+            <ul class="govuk-language-switcher__list" id="language-switcher-list">
               <li class="govuk-language-switcher__list-item">
                 <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
               </li>
@@ -420,8 +428,16 @@ examples:
           text: Navigation item 3
       slots:
         end: |-
-          <nav class="govuk-language-switcher" aria-label="Language switcher">
-            <ul class="govuk-language-switcher__list">
+          <nav class="govuk-language-switcher govuk-language-switcher--no-top-margin" data-module="govuk-language-switcher" aria-label="Language switcher">
+            <button type="button" class="govuk-language-switcher__toggle govuk-js-language-switcher-toggle" aria-controls="language-switcher-list" hidden aria-hidden="true">
+              <svg class="govuk-language-switcher__toggle-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" focusable="false" aria-hidden="true">
+                <circle cx="9" cy="9" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <ellipse cx="9" cy="9" rx="3.5" ry="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M1.5 6h15M1.5 12h15" fill="none" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+              Languages
+            </button>
+            <ul class="govuk-language-switcher__list" id="language-switcher-list">
               <li class="govuk-language-switcher__list-item">
                 <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
               </li>
diff --git a/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs
index 06e501abf1..68aa624486 100644
--- a/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs
+++ b/packages/govuk-frontend/src/govuk/init.jsdom.test.mjs
@@ -17,6 +17,7 @@ jest.mock(`./components/checkboxes/checkboxes.mjs`)
 jest.mock(`./components/error-summary/error-summary.mjs`)
 jest.mock(`./components/exit-this-page/exit-this-page.mjs`)
 jest.mock(`./components/file-upload/file-upload.mjs`)
+jest.mock(`./components/language-switcher/language-switcher.mjs`)
 jest.mock(`./components/notification-banner/notification-banner.mjs`)
 jest.mock(`./components/password-input/password-input.mjs`)
 jest.mock(`./components/radios/radios.mjs`)
@@ -27,6 +28,7 @@ jest.mock(`./components/tabs/tabs.mjs`)
 describe('initAll', () => {
   const components = [
     'checkboxes',
+    'language-switcher',
     'radios',
     'service-navigation',
     'skip-link',
diff --git a/packages/govuk-frontend/src/govuk/init.mjs b/packages/govuk-frontend/src/govuk/init.mjs
index 9cb96f12f2..3c0df194fe 100644
--- a/packages/govuk-frontend/src/govuk/init.mjs
+++ b/packages/govuk-frontend/src/govuk/init.mjs
@@ -7,6 +7,7 @@ import { Checkboxes } from './components/checkboxes/checkboxes.mjs'
 import { ErrorSummary } from './components/error-summary/error-summary.mjs'
 import { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs'
 import { FileUpload } from './components/file-upload/file-upload.mjs'
+import { LanguageSwitcher } from './components/language-switcher/language-switcher.mjs'
 import { NotificationBanner } from './components/notification-banner/notification-banner.mjs'
 import { PasswordInput } from './components/password-input/password-input.mjs'
 import { Radios } from './components/radios/radios.mjs'
@@ -63,6 +64,7 @@ function initAll(scopeOrConfig = {}) {
     [ErrorSummary, config.errorSummary],
     [ExitThisPage, config.exitThisPage],
     [FileUpload, config.fileUpload],
+    [LanguageSwitcher],
     [NotificationBanner, config.notificationBanner],
     [PasswordInput, config.passwordInput],
     [Radios],
diff --git a/packages/govuk-frontend/tasks/build/package.unit.test.mjs b/packages/govuk-frontend/tasks/build/package.unit.test.mjs
index 06afabfc5d..45a68c7123 100644
--- a/packages/govuk-frontend/tasks/build/package.unit.test.mjs
+++ b/packages/govuk-frontend/tasks/build/package.unit.test.mjs
@@ -185,6 +185,7 @@ describe('packages/govuk-frontend/dist/', () => {
           export { ErrorSummary } from './components/error-summary/error-summary.mjs';
           export { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs';
           export { FileUpload } from './components/file-upload/file-upload.mjs';
+          export { LanguageSwitcher } from './components/language-switcher/language-switcher.mjs';
           export { NotificationBanner } from './components/notification-banner/notification-banner.mjs';
           export { PasswordInput } from './components/password-input/password-input.mjs';
           export { Radios } from './components/radios/radios.mjs';

From 68c1e55ff0bd2af43d9fb55c3934c2c83971611a Mon Sep 17 00:00:00 2001
From: Brett Kyle <22524634+domoscargin@users.noreply.github.com>
Date: Wed, 8 Jul 2026 16:40:14 +0100
Subject: [PATCH 2/3] Add language switcher to kitchen sink

---
 .../header-kitchen-sink/index.njk             | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink/index.njk
index 6304d00327..7d9dc5c83a 100644
--- a/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink/index.njk
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink/index.njk
@@ -16,6 +16,7 @@ scenario: |
 {% from "govuk/components/details/macro.njk" import govukDetails %}
 {% from "govuk/components/exit-this-page/macro.njk" import govukExitThisPage %}
 {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}
 {% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {% from "govuk/components/footer/macro.njk" import govukFooter %}
@@ -23,6 +24,23 @@ scenario: |
 {% set pageTitle = example.title %}
 {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
 
+{% set languageSwitcherHTML %}
+  {{ govukLanguageSwitcher({
+    classes: "govuk-language-switcher--no-top-margin",
+    items: [
+      {
+        text: "English",
+        href: "#",
+        current: true
+      },
+      {
+        text: "Cymraeg",
+        href: "#"
+      }
+    ]
+  }) }}
+{% endset %}
+
 {% from "govuk/components/header/macro.njk" import govukHeader %}
 
 {% block bodyStart %}
@@ -82,7 +100,11 @@ scenario: |
         text: 'Companies you follow',
         current: true
       }
-    ]
+    ],
+    slots: {
+      end: languageSwitcherHTML,
+      endRightAligned: true
+    }
   }) }}
 {% endblock %}
 

From 6935a1944e74ce3e2c4891b53f8b27623198da91 Mon Sep 17 00:00:00 2001
From: Brett Kyle <22524634+domoscargin@users.noreply.github.com>
Date: Thu, 9 Jul 2026 16:49:36 +0100
Subject: [PATCH 3/3] [WIP] Add multi languages to kitchen sink example

---
 .../header-kitchen-sink-multi-lang/index.njk  | 429 ++++++++++++++++++
 .../header-kitchen-sink-multi-lang2/index.njk | 420 +++++++++++++++++
 2 files changed, 849 insertions(+)
 create mode 100644 packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang/index.njk
 create mode 100644 packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang2/index.njk

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang/index.njk
new file mode 100644
index 0000000000..29631bf18a
--- /dev/null
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang/index.njk
@@ -0,0 +1,429 @@
+---
+title: Child maintenance - multiple language
+name: Child maintenance (multiple language)
+scenario: |
+  Worst case scenario that includes all possible header-related components.
+  This combination of components is less common but possible.
+  Things to test are if any of the header-related components hinder each other
+  or confuse users.
+---
+
+{% extends "layouts/full-page-example.njk" %}
+
+{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{% from "govuk/components/exit-this-page/macro.njk" import govukExitThisPage %}
+{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{% set pageTitle = example.title %}
+{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% set languageSwitcherHTML %}
+  {{ govukLanguageSwitcher({
+    classes: "govuk-language-switcher--no-top-margin",
+    items: [
+      {
+        text: "English",
+        href: "#",
+        lang: "en",
+        current: true
+      },
+      {
+        text: "Cymraeg",
+        href: "#",
+        lang: "cy"
+      },
+      { 
+        text: "Français",
+        href: "#",
+        lang: "fr"
+      },
+      {
+        text: "हिंदी",
+        href: "#",
+        lang: "hi"
+      },
+      {
+        text: "日本語",
+        href: "#",
+        lang: "ja"
+      },
+      {
+        text: "اردو",
+        href: "#",
+        lang: "ur"
+      },
+      {
+        text: "中文",
+        href: "#",
+        lang: "zh"
+      }
+    ]
+  }) }}
+{% endset %}
+
+{% from "govuk/components/header/macro.njk" import govukHeader %}
+
+{% block bodyStart %}
+  {{ super() }}
+  {{ govukCookieBanner({
+    ariaLabel: "Cookies on [name of service]",
+    messages: [
+      {
+        headingText: "Cookies on [name of service]",
+        html: html,
+        actions: [
+          {
+            text: "Accept analytics cookies",
+            type: "button"
+          },
+          {
+            text: "Reject analytics cookies",
+            type: "button"
+          },
+          {
+            text: "View cookies",
+            href: "#"
+          }
+        ]
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block govukHeader %}
+  {{ govukHeader({
+    navigationClasses: "govuk-header__navigation--end",
+    productName: "Product Name"
+  }) }}
+{% endblock %}
+
+{% block govukServiceNavigation %}
+  {{ govukServiceNavigation({
+    classes: "app-service-navigation",
+    serviceName: "Find company information",
+    serviceUrl: "#0",
+    navigation: [
+      {
+        href: '#1',
+        text: 'Search the register'
+      },
+      {
+        href: '#2',
+        text: 'Your details'
+      },
+      {
+        href: '#3',
+        text: 'Your filings'
+      },
+      {
+        href: '#4',
+        text: 'Companies you follow',
+        current: true
+      }
+    ],
+    slots: {
+      end: languageSwitcherHTML,
+      endRightAligned: true
+    }
+  }) }}
+{% endblock %}
+
+{% block govukSkipLink %}
+  {{ super() }}
+  {{ govukSkipLink({
+    href: "https://bbc.co.uk/weather/",
+    text: "Exit this page",
+    classes: "govuk-js-exit-this-page-skiplink",
+    attributes: {
+      rel: "nofollow noreferrer"
+    }
+  }) }}
+{% endblock %}
+
+{% block headerEnd %}
+  {{ govukPhaseBanner({
+    tag: {
+      text: "Beta"
+    },
+    html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
+  }) }}
+{% endblock %}
+
+{% block containerStart %}
+  {{ govukBreadcrumbs({
+    classes: "",
+    collapseOnMobile: true,
+    items: [
+      {
+        html: "Home",
+        href: "/"
+      },
+      {
+        html: "Births, deaths, marriages and care",
+        href: "/"
+      },
+      {
+        html: "Having a child, parenting and adoption",
+        href: "/"
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+  {{ govukExitThisPage() }}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">Get help arranging child maintenance</h1>
+
+      <p class="govuk-body-m">This service will give you information about the different options available to make a child maintenance arrangement. These are:</p>
+
+      <ul class="govuk-list govuk-list--bullet">
+        <li>making your own arrangement</li>
+        <li>using the Child Maintenance Service</li>
+      </ul>
+
+      <p class="govuk-body-m">
+        <a class="govuk-link" href="contact-child-maintenance-choices">Contact Child Maintenance Choices if you live in Northern Ireland</a>
+      </p>
+
+      <h2 class="govuk-heading-m">Using the Child Maintenance Service</h2>
+      <h3 class="govuk-heading-s">If you already have an active case</h3>
+      <p class="govuk-body-m">If you have a case with the same parent you should <a href="https://www.gov.uk/child-maintenance-service/change-of-circumstances" class="govuk-link"> report a change of circumstances </a>instead of making a new arrangement. You can use this service if you want to set up a new arrangement with a different parent.</p>
+
+      <h3 class="govuk-heading-s">Fees</h3>
+      <p class="govuk-body-m">If you decide to use the Child Maintenance Service the application fee is £20 and cannot be refunded. You’ll need a debit or credit card to pay this. It does not guarantee an arrangement.</p>
+      <p class="govuk-body-m">You will not have to pay the application fee if you:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>are under 19 years old</li>
+        <li>have experienced domestic abuse</li>
+      </ul>
+      <p class="govuk-body-m">
+        <a class="govuk-link" href="https://www.gov.uk/guidance/domestic-abuse-how-to-get-help">Get help if you have experienced domestic abuse</a>
+      </p>
+
+      <h3 class="govuk-heading-s">If you’re worried about contacting the other parent</h3>
+      <p class="govuk-body-m">If you decide to use the Child Maintenance Service, we will try to contact the other parent about setting up child maintenance – you do not need to.</p>
+      <p class="govuk-body-m">We will share the following details with the other parent:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>your name</li>
+        <li>your child’s name and date of birth</li>
+        <li>the number of days your child stays with the parent who will be making payments - the other parent will need to confirm this</li>
+      </ul>
+
+      <p class="govuk-body-m">If you are the parent who will be paying child maintenance, we will also share the following details with the other parent:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>your income information</li>
+        <li>whether any additional children are taken into account in the calculation - we will not share identifying details about these children, only how many have been taken into account</li>
+      </ul>
+
+      {{ govukInsetText({
+        text: "We will not share any other information with the other parent as a part of your application."
+      }) }}
+
+      {% set doIHaveAnActiveCase %}
+        You will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.
+      {% endset %}
+
+      {% set payingToReceiving %}
+        <p class="govuk-body">You will need to close your existing Child Maintenance case and open a new one.</p>
+        <p class="govuk-body">If you were the original applicant, you can close your case in <a href="https://childmaintenanceservice.direct.gov.uk/onlinerevive/public/landing-screen" class="govuk-link" rel="noreferrer noopener" target="_blank">MCMC (opens in new tab)</a>, or you can <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+        <p class="govuk-body">If you were not the original applicant, you will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+      {% endset %}
+
+      {% set receivingToPaying %}
+        <p class="govuk-body">You will need to close your existing Child Maintenance case and open a new one.</p>
+        <p class="govuk-body">If you were the original applicant, you can close your case in <a href="https://childmaintenanceservice.direct.gov.uk/onlinerevive/public/landing-screen" class="govuk-link" rel="noreferrer noopener" target="_blank">MCMC (opens in new tab)</a>, or you can <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+        <p class="govuk-body">If you were not the original applicant, you will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+      {% endset %}
+
+      {{ govukDetails({
+        summaryText: "I do not know if I have an active case",
+        html: doIHaveAnActiveCase
+      }) }}
+
+      {{ govukDetails({
+        summaryText: "I need to change from paying to receiving child maintenance",
+        html: payingToReceiving
+      }) }}
+
+      {{ govukDetails({
+        summaryText: "I need to change from receiving to paying child maintenance",
+        html: receivingToPaying
+      }) }}
+
+      {{ govukButton({
+        text: "Start now",
+        href: "#",
+        isStartButton: true
+      }) }}
+    </div>
+    <div class="govuk-grid-column-one-third">
+      <p class="govuk-body">There could be other content here.</p>
+      <p class="govuk-body">In ea ex nulla veniam commodo Lorem labore dolor et ea in deserunt qui. Enim adipisicing dolore est amet magna. Cupidatat adipisicing labore consectetur exercitation Lorem dolor ipsum et deserunt est. Sit laborum dolore sit id eiusmod.</p>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+
+{% block govukFooter %}
+{{ govukFooter({
+  navigation: [
+    {
+      title: "Coronavirus (COVID-19)",
+      width: "two-thirds",
+      items: [
+        {
+          href: "/coronavirus",
+          text: "Coronavirus (COVID-19): guidance and support"
+        }
+      ]
+    },
+    {
+      title: "Brexit",
+      width: "one-third",
+      items: [
+        {
+          href: "/brexit",
+          text: "Check what you need to do"
+        }
+      ]
+    },
+    {
+      title: "Services and information",
+      width: "two-thirds",
+      columns: 2,
+      items: [
+        {
+          href: "/browse/benefits",
+          text: "Benefits"
+        },
+        {
+          href: "/browse/births-deaths-marriages",
+          text: "Births, deaths, marriages and care"
+        },
+        {
+          href: "/browse/business",
+          text: "Business and self-employed"
+        },
+        {
+          href: "/browse/childcare-parenting",
+          text: "Childcare and parenting"
+        },
+        {
+          href: "/browse/citizenship",
+          text: "Citizenship and living in the UK"
+        },
+        {
+          href: "/browse/justice",
+          text: "Crime, justice and the law"
+        },
+        {
+          href: "/browse/disabilities",
+          text: "Disabled people"
+        },
+        {
+          href: "/browse/driving",
+          text: "Driving and transport"
+        },
+        {
+          href: "/browse/education",
+          text: "Education and learning"
+        },
+        {
+          href: "/browse/employing-people",
+          text: "Employing people"
+        },
+        {
+          href: "/browse/environment-countryside",
+          text: "Environment and countryside"
+        },
+        {
+          href: "/browse/housing-local-services",
+          text: "Housing and local services"
+        },
+        {
+          href: "/browse/tax",
+          text: "Money and tax"
+        },
+        {
+          href: "/browse/abroad",
+          text: "Passports, travel and living abroad"
+        },
+        {
+          href: "/browse/visas-immigration",
+          text: "Visas and immigration"
+        },
+        {
+          href: "/browse/working",
+          text: "Working, jobs and pensions"
+        }
+      ]
+    },
+    {
+      title: "Departments and policy",
+      width: "one-third",
+      items: [
+        {
+          href: "/government/how-government-works",
+          text: "How government works"
+        },
+        {
+          href: "/government/organisations",
+          text: "Departments"
+        },
+        {
+          href: "/world",
+          text: "Worldwide"
+        },
+        {
+          href: "/government/policies",
+          text: "Policies"
+        },
+        {
+          href: "/government/publications",
+          text: "Publications"
+        },
+        {
+          href: "/government/announcements",
+          text: "Announcements"
+        }
+      ]
+    }
+  ],
+  meta: {
+    items: [
+      {
+        href: "/help",
+        text: "Help"
+      },
+      {
+        href: "/help/cookies",
+        text: "Cookies"
+      },
+      {
+        href: "/contact",
+        text: "Contact"
+      },
+      {
+        href: "/help/terms-conditions",
+        text: "Terms and conditions"
+      },
+      {
+        href: "/cymraeg",
+        text: "Rhestr o Wasanaethau Cymraeg"
+      }
+    ],
+    html: 'Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>'
+  }
+}) }}
+{% endblock %}
diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang2/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang2/index.njk
new file mode 100644
index 0000000000..c6b1646f18
--- /dev/null
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/header-kitchen-sink-multi-lang2/index.njk
@@ -0,0 +1,420 @@
+---
+title: Child maintenance - multiple language with short nav menu
+name: Child maintenance (multiple language with short nav menu)
+scenario: |
+  Worst case scenario that includes all possible header-related components.
+  This combination of components is less common but possible.
+  Things to test are if any of the header-related components hinder each other
+  or confuse users.
+---
+
+{% extends "layouts/full-page-example.njk" %}
+
+{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{% from "govuk/components/exit-this-page/macro.njk" import govukExitThisPage %}
+{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{% set pageTitle = example.title %}
+{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% set languageSwitcherHTML %}
+  {{ govukLanguageSwitcher({
+    classes: "govuk-language-switcher--no-top-margin",
+    items: [
+      {
+        text: "English",
+        href: "#",
+        lang: "en",
+        current: true
+      },
+      {
+        text: "Cymraeg",
+        href: "#",
+        lang: "cy"
+      },
+      { 
+        text: "Français",
+        href: "#",
+        lang: "fr"
+      },
+      {
+        text: "हिंदी",
+        href: "#",
+        lang: "hi"
+      },
+      {
+        text: "日本語",
+        href: "#",
+        lang: "ja"
+      },
+      {
+        text: "اردو",
+        href: "#",
+        lang: "ur"
+      },
+      {
+        text: "中文",
+        href: "#",
+        lang: "zh"
+      }
+    ]
+  }) }}
+{% endset %}
+
+{% from "govuk/components/header/macro.njk" import govukHeader %}
+
+{% block bodyStart %}
+  {{ super() }}
+  {{ govukCookieBanner({
+    ariaLabel: "Cookies on [name of service]",
+    messages: [
+      {
+        headingText: "Cookies on [name of service]",
+        html: html,
+        actions: [
+          {
+            text: "Accept analytics cookies",
+            type: "button"
+          },
+          {
+            text: "Reject analytics cookies",
+            type: "button"
+          },
+          {
+            text: "View cookies",
+            href: "#"
+          }
+        ]
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block govukHeader %}
+  {{ govukHeader({
+    navigationClasses: "govuk-header__navigation--end",
+    productName: "Product Name"
+  }) }}
+{% endblock %}
+
+{% block govukServiceNavigation %}
+  {{ govukServiceNavigation({
+    classes: "app-service-navigation",
+    serviceName: "Find company information",
+    serviceUrl: "#0",
+    navigation: [
+      {
+        href: '#1',
+        text: 'Search'
+      },
+      {
+        href: '#2',
+        text: 'Your details'
+      }
+    ],
+    slots: {
+      end: languageSwitcherHTML,
+      endRightAligned: true
+    }
+  }) }}
+{% endblock %}
+
+{% block govukSkipLink %}
+  {{ super() }}
+  {{ govukSkipLink({
+    href: "https://bbc.co.uk/weather/",
+    text: "Exit this page",
+    classes: "govuk-js-exit-this-page-skiplink",
+    attributes: {
+      rel: "nofollow noreferrer"
+    }
+  }) }}
+{% endblock %}
+
+{% block headerEnd %}
+  {{ govukPhaseBanner({
+    tag: {
+      text: "Beta"
+    },
+    html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
+  }) }}
+{% endblock %}
+
+{% block containerStart %}
+  {{ govukBreadcrumbs({
+    classes: "",
+    collapseOnMobile: true,
+    items: [
+      {
+        html: "Home",
+        href: "/"
+      },
+      {
+        html: "Births, deaths, marriages and care",
+        href: "/"
+      },
+      {
+        html: "Having a child, parenting and adoption",
+        href: "/"
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+  {{ govukExitThisPage() }}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">Get help arranging child maintenance</h1>
+
+      <p class="govuk-body-m">This service will give you information about the different options available to make a child maintenance arrangement. These are:</p>
+
+      <ul class="govuk-list govuk-list--bullet">
+        <li>making your own arrangement</li>
+        <li>using the Child Maintenance Service</li>
+      </ul>
+
+      <p class="govuk-body-m">
+        <a class="govuk-link" href="contact-child-maintenance-choices">Contact Child Maintenance Choices if you live in Northern Ireland</a>
+      </p>
+
+      <h2 class="govuk-heading-m">Using the Child Maintenance Service</h2>
+      <h3 class="govuk-heading-s">If you already have an active case</h3>
+      <p class="govuk-body-m">If you have a case with the same parent you should <a href="https://www.gov.uk/child-maintenance-service/change-of-circumstances" class="govuk-link"> report a change of circumstances </a>instead of making a new arrangement. You can use this service if you want to set up a new arrangement with a different parent.</p>
+
+      <h3 class="govuk-heading-s">Fees</h3>
+      <p class="govuk-body-m">If you decide to use the Child Maintenance Service the application fee is £20 and cannot be refunded. You’ll need a debit or credit card to pay this. It does not guarantee an arrangement.</p>
+      <p class="govuk-body-m">You will not have to pay the application fee if you:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>are under 19 years old</li>
+        <li>have experienced domestic abuse</li>
+      </ul>
+      <p class="govuk-body-m">
+        <a class="govuk-link" href="https://www.gov.uk/guidance/domestic-abuse-how-to-get-help">Get help if you have experienced domestic abuse</a>
+      </p>
+
+      <h3 class="govuk-heading-s">If you’re worried about contacting the other parent</h3>
+      <p class="govuk-body-m">If you decide to use the Child Maintenance Service, we will try to contact the other parent about setting up child maintenance – you do not need to.</p>
+      <p class="govuk-body-m">We will share the following details with the other parent:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>your name</li>
+        <li>your child’s name and date of birth</li>
+        <li>the number of days your child stays with the parent who will be making payments - the other parent will need to confirm this</li>
+      </ul>
+
+      <p class="govuk-body-m">If you are the parent who will be paying child maintenance, we will also share the following details with the other parent:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>your income information</li>
+        <li>whether any additional children are taken into account in the calculation - we will not share identifying details about these children, only how many have been taken into account</li>
+      </ul>
+
+      {{ govukInsetText({
+        text: "We will not share any other information with the other parent as a part of your application."
+      }) }}
+
+      {% set doIHaveAnActiveCase %}
+        You will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.
+      {% endset %}
+
+      {% set payingToReceiving %}
+        <p class="govuk-body">You will need to close your existing Child Maintenance case and open a new one.</p>
+        <p class="govuk-body">If you were the original applicant, you can close your case in <a href="https://childmaintenanceservice.direct.gov.uk/onlinerevive/public/landing-screen" class="govuk-link" rel="noreferrer noopener" target="_blank">MCMC (opens in new tab)</a>, or you can <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+        <p class="govuk-body">If you were not the original applicant, you will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+      {% endset %}
+
+      {% set receivingToPaying %}
+        <p class="govuk-body">You will need to close your existing Child Maintenance case and open a new one.</p>
+        <p class="govuk-body">If you were the original applicant, you can close your case in <a href="https://childmaintenanceservice.direct.gov.uk/onlinerevive/public/landing-screen" class="govuk-link" rel="noreferrer noopener" target="_blank">MCMC (opens in new tab)</a>, or you can <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+        <p class="govuk-body">If you were not the original applicant, you will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" class="govuk-link" rel="noreferrer noopener" target="_blank">contact child maintenance (opens in new tab)</a>.</p>
+      {% endset %}
+
+      {{ govukDetails({
+        summaryText: "I do not know if I have an active case",
+        html: doIHaveAnActiveCase
+      }) }}
+
+      {{ govukDetails({
+        summaryText: "I need to change from paying to receiving child maintenance",
+        html: payingToReceiving
+      }) }}
+
+      {{ govukDetails({
+        summaryText: "I need to change from receiving to paying child maintenance",
+        html: receivingToPaying
+      }) }}
+
+      {{ govukButton({
+        text: "Start now",
+        href: "#",
+        isStartButton: true
+      }) }}
+    </div>
+    <div class="govuk-grid-column-one-third">
+      <p class="govuk-body">There could be other content here.</p>
+      <p class="govuk-body">In ea ex nulla veniam commodo Lorem labore dolor et ea in deserunt qui. Enim adipisicing dolore est amet magna. Cupidatat adipisicing labore consectetur exercitation Lorem dolor ipsum et deserunt est. Sit laborum dolore sit id eiusmod.</p>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+
+{% block govukFooter %}
+{{ govukFooter({
+  navigation: [
+    {
+      title: "Coronavirus (COVID-19)",
+      width: "two-thirds",
+      items: [
+        {
+          href: "/coronavirus",
+          text: "Coronavirus (COVID-19): guidance and support"
+        }
+      ]
+    },
+    {
+      title: "Brexit",
+      width: "one-third",
+      items: [
+        {
+          href: "/brexit",
+          text: "Check what you need to do"
+        }
+      ]
+    },
+    {
+      title: "Services and information",
+      width: "two-thirds",
+      columns: 2,
+      items: [
+        {
+          href: "/browse/benefits",
+          text: "Benefits"
+        },
+        {
+          href: "/browse/births-deaths-marriages",
+          text: "Births, deaths, marriages and care"
+        },
+        {
+          href: "/browse/business",
+          text: "Business and self-employed"
+        },
+        {
+          href: "/browse/childcare-parenting",
+          text: "Childcare and parenting"
+        },
+        {
+          href: "/browse/citizenship",
+          text: "Citizenship and living in the UK"
+        },
+        {
+          href: "/browse/justice",
+          text: "Crime, justice and the law"
+        },
+        {
+          href: "/browse/disabilities",
+          text: "Disabled people"
+        },
+        {
+          href: "/browse/driving",
+          text: "Driving and transport"
+        },
+        {
+          href: "/browse/education",
+          text: "Education and learning"
+        },
+        {
+          href: "/browse/employing-people",
+          text: "Employing people"
+        },
+        {
+          href: "/browse/environment-countryside",
+          text: "Environment and countryside"
+        },
+        {
+          href: "/browse/housing-local-services",
+          text: "Housing and local services"
+        },
+        {
+          href: "/browse/tax",
+          text: "Money and tax"
+        },
+        {
+          href: "/browse/abroad",
+          text: "Passports, travel and living abroad"
+        },
+        {
+          href: "/browse/visas-immigration",
+          text: "Visas and immigration"
+        },
+        {
+          href: "/browse/working",
+          text: "Working, jobs and pensions"
+        }
+      ]
+    },
+    {
+      title: "Departments and policy",
+      width: "one-third",
+      items: [
+        {
+          href: "/government/how-government-works",
+          text: "How government works"
+        },
+        {
+          href: "/government/organisations",
+          text: "Departments"
+        },
+        {
+          href: "/world",
+          text: "Worldwide"
+        },
+        {
+          href: "/government/policies",
+          text: "Policies"
+        },
+        {
+          href: "/government/publications",
+          text: "Publications"
+        },
+        {
+          href: "/government/announcements",
+          text: "Announcements"
+        }
+      ]
+    }
+  ],
+  meta: {
+    items: [
+      {
+        href: "/help",
+        text: "Help"
+      },
+      {
+        href: "/help/cookies",
+        text: "Cookies"
+      },
+      {
+        href: "/contact",
+        text: "Contact"
+      },
+      {
+        href: "/help/terms-conditions",
+        text: "Terms and conditions"
+      },
+      {
+        href: "/cymraeg",
+        text: "Rhestr o Wasanaethau Cymraeg"
+      }
+    ],
+    html: 'Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>'
+  }
+}) }}
+{% endblock %}