From 06f398d86a7e085cf76455bec2960bc82c2244d2 Mon Sep 17 00:00:00 2001
From: Vanita Barrett <vanita.barrett@digital.cabinet-office.gov.uk>
Date: Mon, 6 Dec 2021 14:39:24 +0000
Subject: [PATCH] Enhance alignment examples

---
 app/views/examples/footer-alignment/index.njk | 180 ++++++++++++++----
 1 file changed, 145 insertions(+), 35 deletions(-)

diff --git a/app/views/examples/footer-alignment/index.njk b/app/views/examples/footer-alignment/index.njk
index e89eee8a8b..f574901d98 100644
--- a/app/views/examples/footer-alignment/index.njk
+++ b/app/views/examples/footer-alignment/index.njk
@@ -39,8 +39,7 @@
   {{ govukFooter({
     "navigation": [
       {
-        "title": "Single column list 1",
-        "columns": 1,
+        "title": "One-third",
         "items": [
           {
             "href": "#1",
@@ -57,8 +56,7 @@
         ]
       },
       {
-        "title": "Single column list 2",
-        "columns": 1,
+        "title": "One-third",
         "items": [
           {
             "href": "#1",
@@ -75,8 +73,7 @@
         ]
       },
       {
-        "title": "Single column list 3",
-        "columns": 1,
+        "title": "One-third",
         "items": [
           {
             "href": "#1",
@@ -96,7 +93,7 @@
   }) }}
 
   <div class="govuk-width-container">
-    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two column list on the left</h2>
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds / one-third layout</h2>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-third">
         <h3 class="govuk-heading-m">One third</h3>
@@ -122,7 +119,7 @@
   {{ govukFooter({
     "navigation": [
       {
-        "title": "Two column list",
+        "title": "Two-thirds (two columns)",
         "span": 2,
         "columns": 2,
         "items": [
@@ -153,7 +150,7 @@
         ]
       },
       {
-        "title": "Single column list",
+        "title": "One-third",
         "items": [
           {
             "href": "#1",
@@ -173,7 +170,7 @@
   }) }}
 
   <div class="govuk-width-container">
-    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two column list on the right</h2>
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds (one column) / one-third layout</h2>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-third">
         <h3 class="govuk-heading-m">One third</h3>
@@ -199,7 +196,8 @@
   {{ govukFooter({
     "navigation": [
       {
-        "title": "Single column list",
+        "title": "Two-thirds (one column)",
+        "span": 2,
         "items": [
           {
             "href": "#1",
@@ -216,8 +214,7 @@
         ]
       },
       {
-        "title": "Two column list",
-        "columns": 2,
+        "title": "One-third",
         "items": [
           {
             "href": "#1",
@@ -230,18 +227,70 @@
           {
             "href": "#3",
             "text": "Navigation item 3"
+          }
+        ]
+      }
+    ]
+  }) }}
+
+  <div class="govuk-width-container">
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">One-third / two-thirds (two columns) layout</h2>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
+        <p class="govuk-body">
+          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+        </p>
+      </div>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
+        <p class="govuk-body">
+          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+        </p>
+      </div>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
+        <p class="govuk-body">
+          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  {{ govukFooter({
+    "navigation": [
+      {
+        "title": "One-third",
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
           },
           {
-            "href": "#4",
-            "text": "Navigation item 4"
+            "href": "#2",
+            "text": "Navigation item 2"
           },
           {
-            "href": "#5",
-            "text": "Navigation item 5"
+            "href": "#3",
+            "text": "Navigation item 3"
+          }
+        ]
+      },
+      {
+        "title": "Two-thirds",
+        "columns": 2,
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
           },
           {
-            "href": "#6",
-            "text": "Navigation item 6"
+            "href": "#2",
+            "text": "Navigation item 2"
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
           }
         ]
       }
@@ -249,28 +298,22 @@
   }) }}
 
   <div class="govuk-width-container">
-    <h2 class="govuk-heading-m govuk-!-margin-top-6">Two equal columns</h2>
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">Full width</h2>
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-quarter">
-        <h3 class="govuk-heading-m">One quarter</h3>
-        <p class="govuk-body">
-          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
-        </p>
-      </div>
-      <div class="govuk-grid-column-one-quarter">
-        <h3 class="govuk-heading-m">One quarter</h3>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
         <p class="govuk-body">
           This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
         </p>
       </div>
-      <div class="govuk-grid-column-one-quarter">
-        <h3 class="govuk-heading-m">One quarter</h3>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
         <p class="govuk-body">
           This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
         </p>
       </div>
-      <div class="govuk-grid-column-one-quarter">
-        <h3 class="govuk-heading-m">One quarter</h3>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
         <p class="govuk-body">
           This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
         </p>
@@ -281,7 +324,9 @@
   {{ govukFooter({
     "navigation": [
       {
-        "title": "Single column list",
+        "title": "Full width",
+        "span": 3,
+        "columns": 3,
         "items": [
           {
             "href": "#1",
@@ -294,12 +339,64 @@
           {
             "href": "#3",
             "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          },
+          {
+            "href": "#5",
+            "text": "Navigation item 5"
+          },
+          {
+            "href": "#6",
+            "text": "Navigation item 6"
+          }
+        ]
+      }
+    ]
+  }) }}
+
+  <div class="govuk-width-container">
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">Multi-row layout</h2>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
+        <p class="govuk-body">
+          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+        </p>
+      </div>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
+        <p class="govuk-body">
+          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+        </p>
+      </div>
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One third</h3>
+        <p class="govuk-body">
+          This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  {{ govukFooter({
+    "navigation": [
+      {
+        "title": "Two-thirds (one column)",
+        "span": 2,
+        "columns": 2,
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
           }
         ]
       },
       {
-        "title": "Single column list",
-        "columns": 1,
+        "title": "Two-thirds (two-columns)",
+        "columns": 2,
         "items": [
           {
             "href": "#1",
@@ -312,6 +409,19 @@
           {
             "href": "#3",
             "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+        ]
+      },
+      {
+        "title": "One-third",
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
           }
         ]
       }