Enhance alignment examples

alphagov · Dec 6, 2021 · 06f398d · 06f398d
1 parent f224f9e
commit 06f398d
Showing 1 changed file with 145 additions and 35 deletions.
diff --git 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,47 +227,93 @@
           {
             "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"
           }
         ]
       }
     ]
   }) }}
 
   <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"
           }
         ]
       }