From 061c5120f31262fb6f1692160c5f26d84fae5edd Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 4 Dec 2015 09:27:03 +0000
Subject: [PATCH] Scope all paragraphs to the parent class .text

Bump up the font size to 19px on .text, otherwise this needs redefining
all over the place.

This will require a wrapper with the class of .text to be used to set a
19px default for any elements within .text.

Move the max-width setting to paragraphs within these .text blocks.

This will also enable anyone using markdown, or not wishing to add
class attributes to each element in a text block to use the same
pattern, for example, for headings and lists.

The elements page stylesheet also sets a max-width for lists, to avoid
having to use grid layout to constrain the text on its pages.

This will also allow the prototype kit to have an additional stylesheet
which can extend common element styles, using the .text scope.
---
 public/sass/elements-page.scss                |   9 +
 .../sass/elements/_elements-typography.scss   |  27 +-
 public/sass/elements/_lists.scss              |   2 +-
 views/examples/example_date.html              |  15 +-
 views/examples/example_details_summary.html   | 151 ++--
 views/examples/example_form_elements.html     | 148 ++--
 ...le_form_validation_multiple_questions.html | 101 +--
 ...form_validation_single_question_radio.html | 113 +--
 views/examples/example_grid_layout.html       | 201 +++---
 views/examples/example_radios_checkboxes.html | 222 +++---
 views/examples/example_typography.html        |  13 +-
 views/guide_alpha_beta.html                   | 105 +--
 views/guide_buttons.html                      | 233 ++++---
 views/guide_colour.html                       | 658 +++++++++---------
 views/guide_data.html                         | 209 +++---
 views/guide_errors.html                       | 209 +++---
 views/guide_form_elements.html                | 492 ++++++-------
 views/guide_icons_images.html                 |  83 +--
 views/guide_layout.html                       | 205 +++---
 views/guide_typography.html                   | 340 +++++----
 views/index.html                              | 156 +++--
 21 files changed, 1862 insertions(+), 1830 deletions(-)

diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss
index 4b9cc8202..dafb3d1ea 100644
--- a/public/sass/elements-page.scss
+++ b/public/sass/elements-page.scss
@@ -6,6 +6,15 @@
 
 // These are example styles, used only for the elements pages
 
+// Set a max-width for scoped text elements
+.text {
+  ul,
+  ol {
+    // Aim for less than 75 characters per line of text
+    max-width: 30em;
+  }
+}
+
 .elements-index {
   // Reduce top and bottom margins
   .heading-medium {
diff --git a/public/sass/elements/_elements-typography.scss b/public/sass/elements/_elements-typography.scss
index 5c765e46e..93bde63bf 100644
--- a/public/sass/elements/_elements-typography.scss
+++ b/public/sass/elements/_elements-typography.scss
@@ -126,16 +126,25 @@ main {
 }
 
 // Text
-p {
+// Scope all paragraphs to the parent class '.text'
+.text {
+
   @include core-19;
 
-  margin-top: em(5);
-  margin-bottom: em(20);
+  p {
+    // Set a max-width for body copy
+    // Aim for less than 75 characters per line of text
+    max-width: 30em;
 
-  @include media(tablet) {
-    margin-top: em(5, 19);
-    margin-bottom: em(20, 19);
+    margin-top: em(5);
+    margin-bottom: em(20);
+
+    @include media(tablet) {
+      margin-top: em(5, 19);
+      margin-bottom: em(20, 19);
+    }
   }
+
 }
 
 // Lede, or intro text
@@ -143,12 +152,6 @@ p {
   @include core-24;
 }
 
-// Set a max-width for text blocks
-// Less than 75 characters per line of text
-.text {
-  max-width: 30em;
-}
-
 .text-secondary {
   color: $secondary-text-colour;
 }
diff --git a/public/sass/elements/_lists.scss b/public/sass/elements/_lists.scss
index 839cd3e7b..1b55c2d93 100644
--- a/public/sass/elements/_lists.scss
+++ b/public/sass/elements/_lists.scss
@@ -17,7 +17,7 @@ ol {
 .list-number {
   list-style-type: decimal;
   padding-left: 20px;
-  
+
   @include ie-lte(7) {
     padding-left: 28px;
   }
diff --git a/views/examples/example_date.html b/views/examples/example_date.html
index c55dacb7a..e6cc89702 100644
--- a/views/examples/example_date.html
+++ b/views/examples/example_date.html
@@ -7,14 +7,17 @@
 
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">Form elements</span>
-    Example: Date
-  </h1>
+  <div class="text">
 
-  <!-- Date of birth -->
-  {{> form_date }}
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">Form elements</span>
+      Example: Date
+    </h1>
 
+    <!-- Date of birth -->
+    {{> form_date }}
+
+  </div><!-- /.text -->
 </main><!-- /#content -->
 {{/content}}
 
diff --git a/views/examples/example_details_summary.html b/views/examples/example_details_summary.html
index e79417c61..3540be1ed 100644
--- a/views/examples/example_details_summary.html
+++ b/views/examples/example_details_summary.html
@@ -7,85 +7,88 @@
 
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">Typography</span>
-    Example: Details summary
-  </h1>
-
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <p>
-      This example page demonstrates conditionally revealing information, using the HTML5 <code class="code">details</code> and <code class="code">summary</code> elements, <a href="http://html5doctor.com/the-details-and-summary-elements/" rel="external">they are described here</a>.
-      </p>
-
-      <p>
-        These elements are only supported by <a href="http://caniuse.com/#feat=details" rel="external">a few modern browsers</a> at the moment so you'll need a JavaScript polyfill to make them work in other browsers. <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js" rel="external">Here's the polyfill used by GOV.UK elements</a>.
-      </p>
-
-      <p>
-        The polyfill uses the <code class="code">aria-controls</code> attribute on the controlling element to associate it with the section it shows/hides. This is combined with the <code class="code">aria-expanded</code> attribute on the section to inform the <a href="http://www.w3.org/TR/html-aapi/#introduction-accessibility-apis" rel="external">accessibility API</a> of the changes to the document.
-      </p>
-
-      <h2 class="heading-medium">Example 1: Summary content is visible, details content is hidden</h2>
-
-      <div class="form-group">
-        <label class="form-label-bold" for="driving-licence">
-          Driving licence number
-          <span class="form-hint">For example, NORGA657054SM91J</span>
-        </label>
-        <input class="form-control" id="driving-licence" type="text">
-      </div>
+  <div class="text">
 
-      <details class="details">
-        <summary class="details-summary">
-          <span class="details-summary-text">Where to find your driving licence number</span>
-        </summary>
-        <div class="panel-indent">
-          <p>
-            Your driving licence number can be found in section 5<br>
-            of your driving licence photocard.
-          </p>
-        </div>
-      </details>
-
-      <h2 class="heading-medium">Example 2: Summary content is visible, details content is visible</h2>
-      <p>
-        The inital state is set to be open, by setting the boolean <code class="code">open</code> attribute.
-      </p>
-
-      <details class="details" open>
-        <summary class="details-summary">
-          <span class="details-summary-text">Where to find your driving licence number</span>
-        </summary>
-        <div class="panel-indent">
-          <p>
-            Your driving licence number can be found in section 5<br>
-            of your driving licence photocard.
-          </p>
-        </div>
-      </details>
-
-      <h2 class="heading-medium">Example 3: Summary content is visible, details content is visible</h2>
-      <p>
-        The inital state is set to be open, by setting the value of the <code class="code">open</code> attribute to open.
-      </p>
-
-      <details class="details" open="open">
-        <summary class="details-summary">
-          <span class="details-summary-text">Where to find your driving licence number</span>
-        </summary>
-        <div class="panel-indent">
-          <p>
-            Your driving licence number can be found in section 5<br>
-            of your driving licence photocard.
-          </p>
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">Typography</span>
+      Example: Details summary
+    </h1>
+
+    <div class="grid-row">
+      <div class="column-two-thirds">
+
+        <p>
+        This example page demonstrates conditionally revealing information, using the HTML5 <code class="code">details</code> and <code class="code">summary</code> elements, <a href="http://html5doctor.com/the-details-and-summary-elements/" rel="external">they are described here</a>.
+        </p>
+
+        <p>
+          These elements are only supported by <a href="http://caniuse.com/#feat=details" rel="external">a few modern browsers</a> at the moment so you'll need a JavaScript polyfill to make them work in other browsers. <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js" rel="external">Here's the polyfill used by GOV.UK elements</a>.
+        </p>
+
+        <p>
+          The polyfill uses the <code class="code">aria-controls</code> attribute on the controlling element to associate it with the section it shows/hides. This is combined with the <code class="code">aria-expanded</code> attribute on the section to inform the <a href="http://www.w3.org/TR/html-aapi/#introduction-accessibility-apis" rel="external">accessibility API</a> of the changes to the document.
+        </p>
+
+        <h2 class="heading-medium">Example 1: Summary content is visible, details content is hidden</h2>
+
+        <div class="form-group">
+          <label class="form-label-bold" for="driving-licence">
+            Driving licence number
+            <span class="form-hint">For example, NORGA657054SM91J</span>
+          </label>
+          <input class="form-control" id="driving-licence" type="text">
         </div>
-      </details>
 
+        <details class="details">
+          <summary class="details-summary">
+            <span class="details-summary-text">Where to find your driving licence number</span>
+          </summary>
+          <div class="panel-indent">
+            <p>
+              Your driving licence number can be found in section 5<br>
+              of your driving licence photocard.
+            </p>
+          </div>
+        </details>
+
+        <h2 class="heading-medium">Example 2: Summary content is visible, details content is visible</h2>
+        <p>
+          The inital state is set to be open, by setting the boolean <code class="code">open</code> attribute.
+        </p>
+
+        <details class="details" open>
+          <summary class="details-summary">
+            <span class="details-summary-text">Where to find your driving licence number</span>
+          </summary>
+          <div class="panel-indent">
+            <p>
+              Your driving licence number can be found in section 5<br>
+              of your driving licence photocard.
+            </p>
+          </div>
+        </details>
+
+        <h2 class="heading-medium">Example 3: Summary content is visible, details content is visible</h2>
+        <p>
+          The inital state is set to be open, by setting the value of the <code class="code">open</code> attribute to open.
+        </p>
+
+        <details class="details" open="open">
+          <summary class="details-summary">
+            <span class="details-summary-text">Where to find your driving licence number</span>
+          </summary>
+          <div class="panel-indent">
+            <p>
+              Your driving licence number can be found in section 5<br>
+              of your driving licence photocard.
+            </p>
+          </div>
+        </details>
+
+      </div>
     </div>
-  </div>
 
+  </div><!-- /.text -->
 </main><!-- /#content -->
 {{/content}}
 
diff --git a/views/examples/example_form_elements.html b/views/examples/example_form_elements.html
index adb1c3ff7..cf30e5142 100644
--- a/views/examples/example_form_elements.html
+++ b/views/examples/example_form_elements.html
@@ -7,79 +7,81 @@
 
   {{>breadcrumb}}
 
-  <form action="/" method="post" class="form">
-
-    <h1 class="heading-large">
-      <span class="heading-secondary">Form elements</span>
-      Example: Form elements
-    </h1>
-
-    <!-- Input type="text" -->
-    <div class="form-group">
-      <label class="form-label" for="input-text">Single line text fields</label>
-      <input class="form-control" id="input-text" type="text">
-    </div>
-
-    <!-- Textarea -->
-    <div class="form-group">
-      <label class="form-label" for="textarea">Multi-line text fields</label>
-      <textarea class="form-control" id="textarea" cols="30" rows="10"></textarea>
-    </div>
-
-    <!-- Select box -->
-    <div class="form-group">
-      <label class="form-label" for="select-box">Drop down content</label>
-      <select class="form-control" id="select-box">
-        <option>Banana</option>
-        <option>Cherry</option>
-        <option>Lemon</option>
-      </select>
-    </div>
-
-    <!-- Check box -->
-    <div class="form-group">
-      <label class="form-checkbox" for="checkbox-telephone-number" >
-        <input id="checkbox-telephone-number" type="checkbox" value="checkbox-telephone-number">
-        Native check box
-      </label>
-    </div>
-
-    <!-- Chunky check box -->
-
-    <div class="form-group">
-      <label class="block-label" for="checkbox-1">
-        <input id="checkbox-1" type="checkbox" value="waste-animal">
-        Checkbox
-      </label>
-      <label class="block-label" for="checkbox-2">
-        <input id="checkbox-2" type="checkbox" value="waste-mines">
-        Checkbox
-      </label>
-      <label class="block-label" for="checkbox-3">
-        <input id="checkbox-3" type="checkbox" value="farm-agricultural">
-        Checkbox
-      </label>
-    </div>
-
-    <!-- Radio button -->
-
-    <div class="form-group">
-      <label class="block-label" for="radio-1">
-        <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
-        Radio
-      </label>
-      <label class="block-label" for="radio-2">
-        <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
-        Radio
-      </label>
-      <label class="block-label" for="radio-3">
-        <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
-        Radio
-      </label>
-    </div>
-
-  </form>
-
+  <div class="text">
+
+    <form action="/" method="post" class="form">
+
+      <h1 class="heading-large">
+        <span class="heading-secondary">Form elements</span>
+        Example: Form elements
+      </h1>
+
+      <!-- Input type="text" -->
+      <div class="form-group">
+        <label class="form-label" for="input-text">Single line text fields</label>
+        <input class="form-control" id="input-text" type="text">
+      </div>
+
+      <!-- Textarea -->
+      <div class="form-group">
+        <label class="form-label" for="textarea">Multi-line text fields</label>
+        <textarea class="form-control" id="textarea" cols="30" rows="10"></textarea>
+      </div>
+
+      <!-- Select box -->
+      <div class="form-group">
+        <label class="form-label" for="select-box">Drop down content</label>
+        <select class="form-control" id="select-box">
+          <option>Banana</option>
+          <option>Cherry</option>
+          <option>Lemon</option>
+        </select>
+      </div>
+
+      <!-- Check box -->
+      <div class="form-group">
+        <label class="form-checkbox" for="checkbox-telephone-number" >
+          <input id="checkbox-telephone-number" type="checkbox" value="checkbox-telephone-number">
+          Native check box
+        </label>
+      </div>
+
+      <!-- Chunky check box -->
+
+      <div class="form-group">
+        <label class="block-label" for="checkbox-1">
+          <input id="checkbox-1" type="checkbox" value="waste-animal">
+          Checkbox
+        </label>
+        <label class="block-label" for="checkbox-2">
+          <input id="checkbox-2" type="checkbox" value="waste-mines">
+          Checkbox
+        </label>
+        <label class="block-label" for="checkbox-3">
+          <input id="checkbox-3" type="checkbox" value="farm-agricultural">
+          Checkbox
+        </label>
+      </div>
+
+      <!-- Radio button -->
+
+      <div class="form-group">
+        <label class="block-label" for="radio-1">
+          <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
+          Radio
+        </label>
+        <label class="block-label" for="radio-2">
+          <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
+          Radio
+        </label>
+        <label class="block-label" for="radio-3">
+          <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
+          Radio
+        </label>
+      </div>
+
+    </form>
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/examples/example_form_validation_multiple_questions.html b/views/examples/example_form_validation_multiple_questions.html
index a092a1d84..a477a565e 100644
--- a/views/examples/example_form_validation_multiple_questions.html
+++ b/views/examples/example_form_validation_multiple_questions.html
@@ -7,58 +7,61 @@
 
   {{>breadcrumb}}
 
-  <form method="post" action="/errors/example-form-validation-multiple-questions">
-    {{> form_error_multiple }}
-  </form>
+  <div class="text">
 
-  <h2 class="heading-medium implementation-advice">Implementation advice</h2>
-  <p class="lead-in">When an error occurs:</p>
-  <ul class="list-bullet text">
-    <li>
-      add a 5px red left border to the field with the error
-    </li>
-    <li>
-      show an error summary at the top of the page
-    </li>
-    <li>
-      move keyboard focus to the start of the summary
-      <span class="panel-indent">
-        to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
-      </span>
-    </li>
-    <li>
-      indicate to screenreaders that the summary represents a collection of information
-      <span class="panel-indent">
-        add the ARIA <code>role="group"</code> to the containing <code>div</code>
-      </span>
-    </li>
-    <li>
-      use a heading at the top of the summary
-    </li>
-    <li>
-      associate the heading with the summary box
-      <span class="panel-indent">
-        use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
-      </span>
-    </li>
-    <li>
-      link from the error list in the summary to the fields with errors
-    </li>
-    <li>
-      show an error message before each field with an error
-    </li>
-    <li>
-      associate each error message with the corresponding field
-      <span class="panel-indent">
-         add an ID to each error message and associate this with the field using <code>aria-describedby</code>
-      </span>
-    </li>
-  </ul>
+    <form method="post" action="/errors/example-form-validation-multiple-questions">
+      {{> form_error_multiple }}
+    </form>
 
-  <p class="text">
-    Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
-  </p>
+    <h2 class="heading-medium implementation-advice">Implementation advice</h2>
+    <p class="lead-in">When an error occurs:</p>
+    <ul class="list-bullet">
+      <li>
+        add a 5px red left border to the field with the error
+      </li>
+      <li>
+        show an error summary at the top of the page
+      </li>
+      <li>
+        move keyboard focus to the start of the summary
+        <span class="panel-indent">
+          to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
+        </span>
+      </li>
+      <li>
+        indicate to screenreaders that the summary represents a collection of information
+        <span class="panel-indent">
+          add the ARIA <code>role="group"</code> to the containing <code>div</code>
+        </span>
+      </li>
+      <li>
+        use a heading at the top of the summary
+      </li>
+      <li>
+        associate the heading with the summary box
+        <span class="panel-indent">
+          use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
+        </span>
+      </li>
+      <li>
+        link from the error list in the summary to the fields with errors
+      </li>
+      <li>
+        show an error message before each field with an error
+      </li>
+      <li>
+        associate each error message with the corresponding field
+        <span class="panel-indent">
+           add an ID to each error message and associate this with the field using <code>aria-describedby</code>
+        </span>
+      </li>
+    </ul>
 
+    <p>
+      Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
+    </p>
+
+  </div><!-- /.text -->
 </main>
 {{/content}}
 
diff --git a/views/examples/example_form_validation_single_question_radio.html b/views/examples/example_form_validation_single_question_radio.html
index 8dec1b0ec..f74b27ffe 100644
--- a/views/examples/example_form_validation_single_question_radio.html
+++ b/views/examples/example_form_validation_single_question_radio.html
@@ -7,64 +7,67 @@
 
   {{>breadcrumb}}
 
-  <form method="post" action="/errors/example-form-validation-single-question-radio">
-    {{> form_error_radio }}
-  </form>
+  <div class="text">
 
-  <h2 class="heading-medium implementation-advice">Implementation advice</h2>
-  <p class="lead-in">When an error occurs:</p>
-  <ul class="list-bullet text">
-    <li>
-      add a 5px red left border to the field with the error
-    </li>
-    <li>
-      the error message be red and bold and appear after the question
-    </li>
-    <li>
-      the error message must sit inside the <code>&lt;legend&gt;</code>
-    </li>
-    <li>
-      show an error summary at the top of the page
-    </li>
-    <li>
-      move keyboard focus to the start of the summary
-      <span class="panel-indent">
-        to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
-      </span>
-    </li>
-    <li>
-      indicate to screenreaders that the summary represents a collection of information
-      <span class="panel-indent">
-        add the ARIA <code>role="group"</code> to the containing <code>div</code>
-      </span>
-    </li>
-    <li>
-      use a heading at the top of the summary
-    </li>
-    <li>
-      associate the heading with the summary box
-      <span class="panel-indent">
-        use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
-      </span>
-    </li>
-    <li>
-      link from the error list in the summary to the fields with errors
-    </li>
-    <li>
-      show an error message before each field with an error
-    </li>
-    <li>
-      associate each error message with the corresponding field
-      <span class="panel-indent">
-         add an ID to each error message and associate this with the field using <code>aria-describedby</code>
-      </span>
-    </li>
-  </ul>
+    <form method="post" action="/errors/example-form-validation-single-question-radio">
+      {{> form_error_radio }}
+    </form>
 
-  <p class="text">
-    Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
-  </p>
+    <h2 class="heading-medium implementation-advice">Implementation advice</h2>
+    <p class="lead-in">When an error occurs:</p>
+    <ul class="list-bullet">
+      <li>
+        add a 5px red left border to the field with the error
+      </li>
+      <li>
+        the error message be red and bold and appear after the question
+      </li>
+      <li>
+        the error message must sit inside the <code>&lt;legend&gt;</code>
+      </li>
+      <li>
+        show an error summary at the top of the page
+      </li>
+      <li>
+        move keyboard focus to the start of the summary
+        <span class="panel-indent">
+          to move keyboard focus, put <code>tabindex="-1"</code> on the containing div and use <code>obj.focus()</code>
+        </span>
+      </li>
+      <li>
+        indicate to screenreaders that the summary represents a collection of information
+        <span class="panel-indent">
+          add the ARIA <code>role="group"</code> to the containing <code>div</code>
+        </span>
+      </li>
+      <li>
+        use a heading at the top of the summary
+      </li>
+      <li>
+        associate the heading with the summary box
+        <span class="panel-indent">
+          use the ARIA attribute <code>aria-labelledby</code> on the containing <code>div</code>, so that screen readers will automatically announce the heading as soon as focus is moved to the div
+        </span>
+      </li>
+      <li>
+        link from the error list in the summary to the fields with errors
+      </li>
+      <li>
+        show an error message before each field with an error
+      </li>
+      <li>
+        associate each error message with the corresponding field
+        <span class="panel-indent">
+           add an ID to each error message and associate this with the field using <code>aria-describedby</code>
+        </span>
+      </li>
+    </ul>
 
+    <p>
+      Also consider using the <code>aria-invalid</code> attribute to programmatically indicate that a field has an error. The value of the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid attribute</a> will vary depending on the type of error.
+    </p>
+
+  </div><!-- /.text -->
 </main>
 {{/content}}
 
diff --git a/views/examples/example_grid_layout.html b/views/examples/example_grid_layout.html
index ca37e7a09..1e337baf9 100644
--- a/views/examples/example_grid_layout.html
+++ b/views/examples/example_grid_layout.html
@@ -7,19 +7,20 @@
 
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Example: Grid layout
-  </h1>
-
-  <p>
-    <a href="#" class="js-highlight-grid">Toggle background colours</a> to see the size of each of the grid columns.
-  </p>
-
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <h2 class="bold-medium">Two thirds</h2>
-      <div class="text">
+  <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Example: Grid layout
+    </h1>
+
+    <p>
+      <a href="#" class="js-highlight-grid">Toggle background colours</a> to see the size of each of the grid columns.
+    </p>
+
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <h2 class="bold-medium">Two thirds</h2>
         <p>
           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>
@@ -27,99 +28,99 @@ <h2 class="bold-medium">Two thirds</h2>
           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="column-third">
+        <h2 class="bold-medium">One third</h2>
+        <p>
+          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 class="column-third">
-      <h2 class="bold-medium">One third</h2>
-      <p>
-        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 class="grid-row">
-    <div class="column-third">
-      <h2 class="bold-medium">One third</h2>
-      <p>
-        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="column-third">
-      <h2 class="bold-medium">One third</h2>
-      <p>
-        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="column-third">
-      <h2 class="bold-medium">One third</h2>
-      <p>
-        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 class="grid-row">
-    <div class="column-half">
-      <h2 class="bold-medium">One half</h2>
-      <p>
-        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="column-half">
-      <h2 class="bold-medium">One half</h2>
-      <p>
-        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 class="grid-row">
-    <div class="column-half">
-      <h2 class="bold-medium">One half</h2>
-      <p>
-        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="column-quarter">
-      <h2 class="bold-medium">One quarter</h2>
-      <p>
-        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="column-quarter">
-      <h2 class="bold-medium">One quarter</h2>
-      <p>
-        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 class="grid-row">
-    <div class="column-quarter">
-      <h2 class="bold-medium">One quarter</h2>
-      <p>
-        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 class="grid-row">
+      <div class="column-third">
+        <h2 class="bold-medium">One third</h2>
+        <p>
+          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="column-third">
+        <h2 class="bold-medium">One third</h2>
+        <p>
+          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="column-third">
+        <h2 class="bold-medium">One third</h2>
+        <p>
+          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 class="column-quarter">
-      <h2 class="bold-medium">One quarter</h2>
-      <p>
-        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 class="grid-row">
+      <div class="column-half">
+        <h2 class="bold-medium">One half</h2>
+        <p>
+          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="column-half">
+        <h2 class="bold-medium">One half</h2>
+        <p>
+          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 class="column-quarter">
-      <h2 class="bold-medium">One quarter</h2>
-      <p>
-        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 class="grid-row">
+      <div class="column-half">
+        <h2 class="bold-medium">One half</h2>
+        <p>
+          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="column-quarter">
+        <h2 class="bold-medium">One quarter</h2>
+        <p>
+          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="column-quarter">
+        <h2 class="bold-medium">One quarter</h2>
+        <p>
+          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 class="column-quarter">
-      <h2 class="bold-medium">One quarter</h2>
-      <p>
-        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 class="grid-row">
+      <div class="column-quarter">
+        <h2 class="bold-medium">One quarter</h2>
+        <p>
+          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="column-quarter">
+        <h2 class="bold-medium">One quarter</h2>
+        <p>
+          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="column-quarter">
+        <h2 class="bold-medium">One quarter</h2>
+        <p>
+          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="column-quarter">
+        <h2 class="bold-medium">One quarter</h2>
+        <p>
+          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>
 
+  </div><!-- /.text -->
 </main>
 
 {{/content}}
diff --git a/views/examples/example_radios_checkboxes.html b/views/examples/example_radios_checkboxes.html
index 8871c4d9b..bca6d7764 100644
--- a/views/examples/example_radios_checkboxes.html
+++ b/views/examples/example_radios_checkboxes.html
@@ -6,155 +6,157 @@
 <main id="content" role="main">
 
   {{>breadcrumb}}
+  <div class="text">
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+    <div class="grid-row">
+      <div class="column-two-thirds">
 
-      <h1 class="heading-xlarge">
-        <span class="heading-secondary">Form elements</span>
-        Example: Radio buttons <br> and checkboxes
-      </h1>
-
-      <p class="text">
-        This test page demonstrates selection-buttons.js from the govuk frontend toolkit, which
-        sets 'focused' and 'selected' states for the large hit area labels that wrap checkboxes and radio buttons.
-      </p>
-
-      <p class="text">
-        It also demonstrates setting ARIA attributes when showing and hiding additional content.
-      </p>
+        <h1 class="heading-xlarge">
+          <span class="heading-secondary">Form elements</span>
+          Example: Radio buttons <br> and checkboxes
+        </h1>
 
-      <form action="/" method="post" class="form">
+        <p>
+          This test page demonstrates selection-buttons.js from the govuk frontend toolkit, which
+          sets 'focused' and 'selected' states for the large hit area labels that wrap checkboxes and radio buttons.
+        </p>
 
-        <h1 class="heading-large">
-          What is your nationality?
-        </h1>
+        <p>
+          It also demonstrates setting ARIA attributes when showing and hiding additional content.
+        </p>
 
-        <p>If you have dual nationality, select all options that are relevant to you.</p>
+        <form action="/" method="post" class="form">
 
-        <div class="form-group">
-          <fieldset class="fieldset">
+          <h1 class="heading-large">
+            What is your nationality?
+          </h1>
 
-            <legend class="visuallyhidden">What is your nationality?</legend>
+          <p>If you have dual nationality, select all options that are relevant to you.</p>
 
-            <label for="nationality_british" class="block-label">
-              <input type="checkbox" name="nationality_british" value="British" id="nationality_british">
-              British
-            </label>
+          <div class="form-group">
+            <fieldset class="fieldset">
 
-            <label for="nationality_irish" class="block-label">
-              <input type="checkbox" name="nationality_irish" value="Irish" id="nationality_irish">
-              Irish
-            </label>
+              <legend class="visuallyhidden">What is your nationality?</legend>
 
-            <label for="nationality_other" class="block-label" data-target="example_nationality_other">
-              <input type="checkbox" name="nationality_other" value="Wales" id="nationality_other">
-              Citizen of another country
-            </label>
+              <label for="nationality_british" class="block-label">
+                <input type="checkbox" name="nationality_british" value="British" id="nationality_british">
+                British
+              </label>
 
-            <div class="panel-indent js-hidden" id="example_nationality_other">
-              <label for="nationality_other_countries" class="form-label">
-                Country name
+              <label for="nationality_irish" class="block-label">
+                <input type="checkbox" name="nationality_irish" value="Irish" id="nationality_irish">
+                Irish
               </label>
-              <input type="text" id="nationality_other_countries">
-            </div>
 
-          </fieldset>
-        </div>
+              <label for="nationality_other" class="block-label" data-target="example_nationality_other">
+                <input type="checkbox" name="nationality_other" value="Wales" id="nationality_other">
+                Citizen of another country
+              </label>
 
-        <h1 class="heading-large">
-          Where should we send your new<br> passport?
-        </h1>
+              <div class="panel-indent js-hidden" id="example_nationality_other">
+                <label for="nationality_other_countries" class="form-label">
+                  Country name
+                </label>
+                <input type="text" id="nationality_other_countries">
+              </div>
 
-        <div class="form-group">
-          <fieldset class="fieldset">
+            </fieldset>
+          </div>
 
-            <legend class="visuallyhidden">
-              Where should we send your new passport?
-            </legend>
+          <h1 class="heading-large">
+            Where should we send your new<br> passport?
+          </h1>
 
-            <label for="radio-home-address" class="block-label">
-              <input id="radio-home-address" type="radio" name="radio-indent-group" value="Yes">
-              Home address
-            </label>
+          <div class="form-group">
+            <fieldset class="fieldset">
 
-            <label for="radio-other-address" class="block-label" data-target="example-other-address">
-              <input id="radio-other-address" type="radio" name="radio-indent-group" value="No">
-              Other address
-            </label>
+              <legend class="visuallyhidden">
+                Where should we send your new passport?
+              </legend>
 
-            <div class="panel-indent js-hidden" id="example-other-address">
+              <label for="radio-home-address" class="block-label">
+                <input id="radio-home-address" type="radio" name="radio-indent-group" value="Yes">
+                Home address
+              </label>
 
-              <h2 class="heading-medium">
-                Your other address
-              </h2>
+              <label for="radio-other-address" class="block-label" data-target="example-other-address">
+                <input id="radio-other-address" type="radio" name="radio-indent-group" value="No">
+                Other address
+              </label>
 
-              <fieldset class="fieldset">
+              <div class="panel-indent js-hidden" id="example-other-address">
 
-                <legend class="visuallyhidden">
+                <h2 class="heading-medium">
                   Your other address
-                </legend>
+                </h2>
 
-                <div class="form-group form-group-compound">
-                  <label class="form-label" for="address-line-1">Street</label>
-                  <input type="text" class="form-control" id="address-line-1">
-                </div>
+                <fieldset class="fieldset">
 
-                <div class="form-group">
-                  <label class="form-label visuallyhidden" for="address-line-2">Street</label>
-                  <input type="text" class="form-control" id="address-line-2">
-                </div>
+                  <legend class="visuallyhidden">
+                    Your other address
+                  </legend>
 
-                <div class="form-group">
-                  <label class="form-label" for="address-town">Town or City</label>
-                  <input type="text" class="form-control form-control-1-4" id="address-town">
-                </div>
+                  <div class="form-group form-group-compound">
+                    <label class="form-label" for="address-line-1">Street</label>
+                    <input type="text" class="form-control" id="address-line-1">
+                  </div>
 
-                <div class="form-group">
-                  <label class="form-label" for="address-postcode">Postcode</label>
-                  <input type="text" class="form-control form-control-1-8" id="address-postcode">
-                </div>
+                  <div class="form-group">
+                    <label class="form-label visuallyhidden" for="address-line-2">Street</label>
+                    <input type="text" class="form-control" id="address-line-2">
+                  </div>
 
-              </fieldset>
+                  <div class="form-group">
+                    <label class="form-label" for="address-town">Town or City</label>
+                    <input type="text" class="form-control form-control-1-4" id="address-town">
+                  </div>
 
-            </div>
-          </fieldset>
-        </div>
+                  <div class="form-group">
+                    <label class="form-label" for="address-postcode">Postcode</label>
+                    <input type="text" class="form-control form-control-1-8" id="address-postcode">
+                  </div>
 
-        <h1 class="heading-large">
-          Which part of the Housing Act was your licence isued under?
-        </h1>
+                </fieldset>
 
-        <p>
-          Select one of the options below.
-        </p>
+              </div>
+            </fieldset>
+          </div>
+
+          <h1 class="heading-large">
+            Which part of the Housing Act was your licence isued under?
+          </h1>
 
-        <div class="form-group">
-          <fieldset class="fieldset">
+          <p>
+            Select one of the options below.
+          </p>
 
-            <legend class="visuallyhidden">
-              Which part of the Housing Act was your licence isued under?
-            </legend>
+          <div class="form-group">
+            <fieldset class="fieldset">
 
-            <label for="radio-part-2" class="block-label">
-              <input id="radio-part-2" type="radio" name="housing-act" value="Part 2">
-              <span class="heading-small">Part 2 of the Housing Act 2004</span><br>
-              For properties that are 3 or more stories high and occupied by 5 or more people
-            </label>
+              <legend class="visuallyhidden">
+                Which part of the Housing Act was your licence isued under?
+              </legend>
 
-            <label for="radio-part-3" class="block-label">
-              <input id="radio-part-3" type="radio" name="housing-act" value="Part 3">
-              <span class="heading-small">Part 3 of the Housing Act 2004</span><br>
-              For properties that are within a geographical area defined by a local council
-            </label>
+              <label for="radio-part-2" class="block-label">
+                <input id="radio-part-2" type="radio" name="housing-act" value="Part 2">
+                <span class="heading-small">Part 2 of the Housing Act 2004</span><br>
+                For properties that are 3 or more stories high and occupied by 5 or more people
+              </label>
+
+              <label for="radio-part-3" class="block-label">
+                <input id="radio-part-3" type="radio" name="housing-act" value="Part 3">
+                <span class="heading-small">Part 3 of the Housing Act 2004</span><br>
+                For properties that are within a geographical area defined by a local council
+              </label>
 
-          </fieldset>
-        </div>
+            </fieldset>
+          </div>
 
-      </form>
+        </form>
+      </div>
     </div>
-  </div>
 
+  </div><!-- /.text -->
 </main><!-- /#content-->
 {{/content}}
 
diff --git a/views/examples/example_typography.html b/views/examples/example_typography.html
index c6f4ba220..1fd8db7e6 100644
--- a/views/examples/example_typography.html
+++ b/views/examples/example_typography.html
@@ -7,13 +7,13 @@
 
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">Typography</span>
-    Example: Typography
-  </h1>
-
   <div class="text">
 
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">Typography</span>
+      Example: Typography
+    </h1>
+
     <h1 class="heading-xlarge">
       <span class="heading-secondary">A 27px section heading</span>
       A 48px heading
@@ -59,8 +59,7 @@ <h4 class="heading-small">A 19px heading</h4>
 
     <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
 
-  </div>
-
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_alpha_beta.html b/views/guide_alpha_beta.html
index dc1936be2..c37f4bf6e 100755
--- a/views/guide_alpha_beta.html
+++ b/views/guide_alpha_beta.html
@@ -9,59 +9,62 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Alpha and beta banners
-  </h1>
-
-  <p class="lede text">
-    You have to use an alpha banner if your thing is in alpha, and a beta banner if it’s in beta.
-  </p>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#alpha-banner">Alpha banner</a></li>
-        <li><a href="#beta-banner">Beta banner</a></li>
-        <li><a href="#creating-phase-banners">Creating phase banners</a></li>
-      </ul>
+  <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Alpha and beta banners
+    </h1>
+
+    <p class="lede">
+      You have to use an alpha banner if your thing is in alpha, and a beta banner if it’s in beta.
+    </p>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#alpha-banner">Alpha banner</a></li>
+          <li><a href="#beta-banner">Beta banner</a></li>
+          <li><a href="#creating-phase-banners">Creating phase banners</a></li>
+        </ul>
+      </div>
     </div>
-  </div>
-
-<h3 class="heading-medium" id="alpha-banner">Alpha banner</h3>
-<div class="example">
-  {{> phase_banner_alpha }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> phase_banner_alpha }}
-</code>
-</pre>
-
-<h3 class="heading-medium" id="beta-banner">Beta banner</h3>
-<div class="example">
-  {{> phase_banner_beta }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> phase_banner_beta }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="creating-phase-banners">Creating alpha and beta banners</h3>
-  <p class="text">
-    Use the GOV.UK Sass phase banner mixin &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_alpha-beta.scss">alpha-beta.scss</a> file.
-  </p>
-
-  <p>
-    <a href="https://designpatterns.hackpad.com/Alpha-and-beta-banners-HpbaBjaYRSJ" rel="external">
-      Discuss alpha and beta banners on the design patterns Hackpad
-    </a>
-  </p>
 
+    <h3 class="heading-medium" id="alpha-banner">Alpha banner</h3>
+    <div class="example">
+      {{> phase_banner_alpha }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> phase_banner_alpha }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="beta-banner">Beta banner</h3>
+    <div class="example">
+      {{> phase_banner_beta }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> phase_banner_beta }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="creating-phase-banners">Creating alpha and beta banners</h3>
+    <p>
+      Use the GOV.UK Sass phase banner mixin &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_alpha-beta.scss">alpha-beta.scss</a> file.
+    </p>
+
+    <p>
+      <a href="https://designpatterns.hackpad.com/Alpha-and-beta-banners-HpbaBjaYRSJ" rel="external">
+        Discuss alpha and beta banners on the design patterns Hackpad
+      </a>
+    </p>
+
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_buttons.html b/views/guide_buttons.html
index e1bf09140..cfc84bcab 100755
--- a/views/guide_buttons.html
+++ b/views/guide_buttons.html
@@ -9,138 +9,141 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Buttons
-  </h1>
-
-  <p class="lede text">
-    Use buttons to move though a transaction, aim to use only one button per page.
-  </p>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#button-text">Button text</a></li>
-        <li><a href="#button-start-now">Start now button</a></li>
-        <li><a href="#button-alignment">Button alignment</a></li>
-        <li><a href="#button-disabled">Disabled buttons</a></li>
-        <li><a href="#creating-buttons">Creating buttons</a></li>
-      </ul>
-    </div>
-  </div>
-
-  <h3 class="heading-medium" id="button-text">Button text</h3>
-  <p class="text">
-    Button text should be short and describe the action the button performs.
-  </p>
-
-<div class="example">
-  {{> buttons_button }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> buttons_button }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="button-start-now">Start now button</h3>
-  <p class="text">
-    Launch your service with a Start now button.
-  </p>
-
-<div class="example">
-  {{> buttons_button_start_now }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> buttons_button_start_now }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="button-alignment">Button alignment</h3>
-  <p class="text">
-    Align the primary action button to the left edge of your form, in the user's line of sight.
-  </p>
-
-  <div class="example example-button">
-
-    <form action="/" method="post" class="form">
-      <div class="form-group">
-        <label for="form-email-address-1" class="form-label">Email address</label>
-        <input type="text" class="form-control" id="form-email-address-1">
-      </div>
-      <div class="form-group">
-        <button class="button">Save and continue</button>
+  <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Buttons
+    </h1>
+
+    <p class="lede">
+      Use buttons to move though a transaction, aim to use only one button per page.
+    </p>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#button-text">Button text</a></li>
+          <li><a href="#button-start-now">Start now button</a></li>
+          <li><a href="#button-alignment">Button alignment</a></li>
+          <li><a href="#button-disabled">Disabled buttons</a></li>
+          <li><a href="#creating-buttons">Creating buttons</a></li>
+        </ul>
       </div>
-    </form>
+    </div>
 
-  </div>
+    <h3 class="heading-medium" id="button-text">Button text</h3>
+    <p>
+      Button text should be short and describe the action the button performs.
+    </p>
 
-  <h3 class="heading-medium" id="button-disabled">Disabled buttons</h3>
-  <p>
-    Disabled buttons should be set at 50% opacity.
-  </p>
+    <div class="example">
+      {{> buttons_button }}
+    </div>
 
-<div class="example">
-  <button class="button" disabled="disabled">Primary button</button>
-</div>
+    <pre>
+    <code class="language-markup">
+      {{> buttons_button }}
+    </code>
+    </pre>
 
-<pre>
-<code class="language-markup">
-  {{> buttons_button_disabled }}
-</code>
-</pre>
+    <h3 class="heading-medium" id="button-start-now">Start now button</h3>
+    <p>
+      Launch your service with a Start now button.
+    </p>
 
-  <h3 class="heading-medium" id="creating-buttons">Creating buttons</h3>
-  <p class="text">
-    Use the GOV.UK Sass button mixin &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_buttons.scss" rel="external">buttons.scss</a> file.
-  </p>
+    <div class="example">
+      {{> buttons_button_start_now }}
+    </div>
 
-  <div class="example example-button">
-    <div class="grid-row">
-      <div class="column-third">
+    <pre>
+    <code class="language-markup">
+      {{> buttons_button_start_now }}
+    </code>
+    </pre>
 
-        <button class="button">Save and continue</button>
+    <h3 class="heading-medium" id="button-alignment">Button alignment</h3>
+    <p>
+      Align the primary action button to the left edge of your form, in the user's line of sight.
+    </p>
 
-      </div>
-      <div class="column-third">
-
-        <div class="swatch-wrapper">
-          <h4 class="heading-small">Button</h4>
-          <div class="swatch swatch-button-colour"></div>
-          <ul>
-            <li><b>#00823B</b></li>
-            <li>$button-colour</li>
-          </ul>
+    <div class="example example-button">
+
+      <form action="/" method="post" class="form">
+        <div class="form-group">
+          <label for="form-email-address-1" class="form-label">Email address</label>
+          <input type="text" class="form-control" id="form-email-address-1">
         </div>
+        <div class="form-group">
+          <button class="button">Save and continue</button>
+        </div>
+      </form>
+
+    </div>
+
+    <h3 class="heading-medium" id="button-disabled">Disabled buttons</h3>
+    <p>
+      Disabled buttons should be set at 50% opacity.
+    </p>
+
+    <div class="example">
+      <button class="button" disabled="disabled">Primary button</button>
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> buttons_button_disabled }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="creating-buttons">Creating buttons</h3>
+    <p>
+      Use the GOV.UK Sass button mixin &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_buttons.scss" rel="external">buttons.scss</a> file.
+    </p>
+
+    <div class="example example-button">
+      <div class="grid-row">
+        <div class="column-third">
+
+          <button class="button">Save and continue</button>
 
-      </div>
-      <div class="column-third">
-
-        <div class="swatch-wrapper">
-          <h4 class="heading-small">Focus</h4>
-          <div class="swatch swatch-yellow"></div>
-          <ul>
-            <li><b>#FFBF47</b></li>
-            <li>$focus-colour</li>
-          </ul>
         </div>
+        <div class="column-third">
 
-      </div>
+          <div class="swatch-wrapper">
+            <h4 class="heading-small">Button</h4>
+            <div class="swatch swatch-button-colour"></div>
+            <ul>
+              <li><b>#00823B</b></li>
+              <li>$button-colour</li>
+            </ul>
+          </div>
+
+        </div>
+        <div class="column-third">
+
+          <div class="swatch-wrapper">
+            <h4 class="heading-small">Focus</h4>
+            <div class="swatch swatch-yellow"></div>
+            <ul>
+              <li><b>#FFBF47</b></li>
+              <li>$focus-colour</li>
+            </ul>
+          </div>
 
+        </div>
+
+      </div>
     </div>
-  </div>
 
-  <p>
-    <a href="https://designpatterns.hackpad.com/Navigation-buttons-continue-next-previous-zoP1sKiW3y4" rel="external">
-      Discuss navigation buttons on the design patterns Hackpad
-    </a>
-  </p>
+    <p>
+      <a href="https://designpatterns.hackpad.com/Navigation-buttons-continue-next-previous-zoP1sKiW3y4" rel="external">
+        Discuss navigation buttons on the design patterns Hackpad
+      </a>
+    </p>
 
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_colour.html b/views/guide_colour.html
index 196af2ac8..71f254958 100755
--- a/views/guide_colour.html
+++ b/views/guide_colour.html
@@ -9,415 +9,417 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Colour
-  </h1>
-
-  <p class="lede text">
-    Always use the GOV.UK colour palette.
-  </p>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#colour-contrast">Colour contrast</a></li>
-        <li><a href="#colour-sass-variables">Sass variables</a></li>
-        <li><a href="#colour-status-colours">Status colours</a></li>
-        <li><a href="#colour-greyscale-palette">Greyscale palette</a></li>
-        <li><a href="#colour-extended-palette">Extended palette</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
+  <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Colour
+    </h1>
+
+    <p class="lede">
+      Always use the GOV.UK colour palette.
+    </p>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#colour-contrast">Colour contrast</a></li>
+          <li><a href="#colour-sass-variables">Sass variables</a></li>
+          <li><a href="#colour-status-colours">Status colours</a></li>
+          <li><a href="#colour-greyscale-palette">Greyscale palette</a></li>
+          <li><a href="#colour-extended-palette">Extended palette</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <h3 class="heading-medium" id="colour-contrast">Colour contrast</h3>
-  <p class="text">
-    The colour contrast ratio for text and interactive elements should be at least 4.5:1 <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="external">as recommended by the W3C</a>. Test your service to meet this standard.
-  </p>
+    <h3 class="heading-medium" id="colour-contrast">Colour contrast</h3>
+    <p>
+      The colour contrast ratio for text and interactive elements should be at least 4.5:1 <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="external">as recommended by the W3C</a>. Test your service to meet this standard.
+    </p>
 
-  <h3 class="heading-medium"  id="colour-sass-variables">Sass variables</h3>
-  <p class="text">
-    Use Sass variables in case colour values need to be updated &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss</a> file.
-  </p>
+    <h3 class="heading-medium"  id="colour-sass-variables">Sass variables</h3>
+    <p>
+      Use Sass variables in case colour values need to be updated &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss</a> file.
+    </p>
 
-  <div class="example">
+    <div class="example">
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Text</h4>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Text</h4>
 
-      <div class="swatch swatch-text-colour"></div>
-      <ul>
-        <li><b>#0B0C0C</b></li>
-        <li>$text-colour</li>
-      </ul>
+        <div class="swatch swatch-text-colour"></div>
+        <ul>
+          <li><b>#0B0C0C</b></li>
+          <li>$text-colour</li>
+        </ul>
 
-      <div class="swatch swatch-text-secondary"></div>
-      <ul>
-        <li><b>#6F777B</b></li>
-        <li>$secondary-text-colour</li>
-      </ul>
+        <div class="swatch swatch-text-secondary"></div>
+        <ul>
+          <li><b>#6F777B</b></li>
+          <li>$secondary-text-colour</li>
+        </ul>
 
-      <div class="swatch swatch-page-colour"></div>
+        <div class="swatch swatch-page-colour"></div>
 
-      <ul>
-        <li><b>#FFFFFF</b></li>
-        <li>$page-colour</li>
-      </ul>
-    </div>
+        <ul>
+          <li><b>#FFFFFF</b></li>
+          <li>$page-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Links</h4>
-
-      <div class="swatch swatch-link-colour"></div>
-      <ul>
-        <li><b>#005ea5</b></li>
-        <li>$link-colour</li>
-      </ul>
-
-      <div class="swatch swatch-link-colour-hover"></div>
-      <ul>
-        <li><b>#2e8aca</b></li>
-        <li>$link-hover-colour</li>
-      </ul>
-
-      <div class="swatch swatch-link-colour-visited"></div>
-      <ul>
-        <li><b>#4c2c92</b></li>
-        <li>$link-visited-colour</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Links</h4>
+
+        <div class="swatch swatch-link-colour"></div>
+        <ul>
+          <li><b>#005ea5</b></li>
+          <li>$link-colour</li>
+        </ul>
+
+        <div class="swatch swatch-link-colour-hover"></div>
+        <ul>
+          <li><b>#2e8aca</b></li>
+          <li>$link-hover-colour</li>
+        </ul>
+
+        <div class="swatch swatch-link-colour-visited"></div>
+        <ul>
+          <li><b>#4c2c92</b></li>
+          <li>$link-visited-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Backgrounds</h4>
-
-      <div class="swatch swatch-border-colour"></div>
-      <ul>
-        <li><b>#BFC1C3</b></li>
-        <li>$border-colour</li>
-      </ul>
-
-      <div class="swatch swatch-panel-colour"></div>
-      <ul>
-        <li><b>#DEE0E2</b></li>
-        <li>$panel-colour</li>
-      </ul>
-
-      <div class="swatch swatch-highlight-colour"></div>
-      <ul>
-        <li><b>#F8F8F8</b></li>
-        <li>$highlight-colour</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Backgrounds</h4>
+
+        <div class="swatch swatch-border-colour"></div>
+        <ul>
+          <li><b>#BFC1C3</b></li>
+          <li>$border-colour</li>
+        </ul>
+
+        <div class="swatch swatch-panel-colour"></div>
+        <ul>
+          <li><b>#DEE0E2</b></li>
+          <li>$panel-colour</li>
+        </ul>
+
+        <div class="swatch swatch-highlight-colour"></div>
+        <ul>
+          <li><b>#F8F8F8</b></li>
+          <li>$highlight-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Buttons</h4>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Buttons</h4>
 
-      <div class="swatch swatch-button-colour"></div>
-      <ul>
-        <li><b>#00823B</b></li>
-        <li>$button-colour</li>
-      </ul>
+        <div class="swatch swatch-button-colour"></div>
+        <ul>
+          <li><b>#00823B</b></li>
+          <li>$button-colour</li>
+        </ul>
 
-      <div class="swatch swatch-green"></div>
-      <ul>
-        <li><b>#006435</b></li>
-        <li>$green (hover colour)</li>
-      </ul>
-    </div>
+        <div class="swatch swatch-green"></div>
+        <ul>
+          <li><b>#006435</b></li>
+          <li>$green (hover colour)</li>
+        </ul>
+      </div>
+
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Focus</h4>
+        <div class="swatch swatch-yellow"></div>
+        <ul>
+          <li><b>#FFBF47</b></li>
+          <li>$focus-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Focus</h4>
-      <div class="swatch swatch-yellow"></div>
-      <ul>
-        <li><b>#FFBF47</b></li>
-        <li>$focus-colour</li>
-      </ul>
     </div>
 
-  </div>
+    <h3 class="heading-medium" id="colour-status-colours">Status colours</h3>
+    <div class="example">
 
-  <h3 class="heading-medium" id="colour-status-colours">Status colours</h3>
-  <div class="example">
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-alpha"></div>
+        <ul>
+          <li><b>#d53880</b></li>
+          <li>$alpha-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-alpha"></div>
-      <ul>
-        <li><b>#d53880</b></li>
-        <li>$alpha-colour</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-beta"></div>
+        <ul>
+          <li><b>#f47738</b></li>
+          <li>$beta-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-beta"></div>
-      <ul>
-        <li><b>#f47738</b></li>
-        <li>$beta-colour</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-discovery"></div>
+        <ul>
+          <li><b>#912b88</b></li>
+          <li>$discovery-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-discovery"></div>
-      <ul>
-        <li><b>#912b88</b></li>
-        <li>$discovery-colour</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-live"></div>
+        <ul>
+          <li><b>#85994b</b></li>
+          <li>$live-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-live"></div>
-      <ul>
-        <li><b>#85994b</b></li>
-        <li>$live-colour</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-error"></div>
+        <ul>
+          <li><b>#af1324</b></li>
+          <li>$error-colour</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-error"></div>
-      <ul>
-        <li><b>#af1324</b></li>
-        <li>$error-colour</li>
-      </ul>
     </div>
 
-  </div>
+    <h3 class="heading-medium" id="colour-greyscale-palette">Greyscale palette</h3>
+    <div class="example">
 
-  <h3 class="heading-medium" id="colour-greyscale-palette">Greyscale palette</h3>
-  <div class="example">
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-black"></div>
+        <ul>
+          <li><b>#0B0C0C</b></li>
+          <li>$black</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-black"></div>
-      <ul>
-        <li><b>#0B0C0C</b></li>
-        <li>$black</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-grey-1"></div>
+        <ul>
+          <li><b>#6F777B</b></li>
+          <li>$grey-1</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-grey-1"></div>
-      <ul>
-        <li><b>#6F777B</b></li>
-        <li>$grey-1</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-grey-2"></div>
+        <ul>
+          <li><b>#BFC1C3</b></li>
+          <li>$grey-2</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-grey-2"></div>
-      <ul>
-        <li><b>#BFC1C3</b></li>
-        <li>$grey-2</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-grey-3"></div>
+        <ul>
+          <li><b>#DEE0E2</b></li>
+          <li>$grey-3</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-grey-3"></div>
-      <ul>
-        <li><b>#DEE0E2</b></li>
-        <li>$grey-3</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <div class="swatch swatch-grey-4"></div>
+        <ul>
+          <li><b>#F8F8F8</b></li>
+          <li>$grey-4</li>
+        </ul>
+      </div>
 
-    <div class="swatch-wrapper">
-      <div class="swatch swatch-grey-4"></div>
-      <ul>
-        <li><b>#F8F8F8</b></li>
-        <li>$grey-4</li>
-      </ul>
     </div>
 
-  </div>
+    <h3 class="heading-medium" id="colour-extended-palette">Extended palette</h3>
+    <ul class="list-bullet">
+      <li>used for graphs and supporting material</li>
+      <li>for tints of the extended palette use 50% or 25%</li>
+      <li>for departmental colours
+       &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss file</a></li>
+    </ul>
 
-  <h3 class="heading-medium" id="colour-extended-palette">Extended palette</h3>
-  <ul class="list-bullet text">
-    <li>used for graphs and supporting material</li>
-    <li>for tints of the extended palette use 50% or 25%</li>
-    <li>for departmental colours
-     &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss file</a></li>
-  </ul>
+    <div class="example">
 
-  <div class="example">
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Purple</h4>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Purple</h4>
+        <div class="swatch swatch-purple"></div>
+        <ul>
+          <li><b>#2e358b</b></li>
+          <li>$purple</li>
+        </ul>
 
-      <div class="swatch swatch-purple"></div>
-      <ul>
-        <li><b>#2e358b</b></li>
-        <li>$purple</li>
-      </ul>
+        <h4 class="heading-small">Mauve</h4>
 
-      <h4 class="heading-small">Mauve</h4>
+        <div class="swatch swatch-mauve"></div>
+        <ul>
+          <li><b>#6f72af</b></li>
+          <li>$mauve</li>
+        </ul>
 
-      <div class="swatch swatch-mauve"></div>
-      <ul>
-        <li><b>#6f72af</b></li>
-        <li>$mauve</li>
-      </ul>
+        <h4 class="heading-small">Fuschia</h4>
 
-      <h4 class="heading-small">Fuschia</h4>
+        <div class="swatch swatch-fuschia"></div>
+        <ul>
+          <li><b>#912b88</b></li>
+          <li>$fuschia</li>
+        </ul>
+      </div>
 
-      <div class="swatch swatch-fuschia"></div>
-      <ul>
-        <li><b>#912b88</b></li>
-        <li>$fuschia</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Pink</h4>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Pink</h4>
+        <div class="swatch swatch-pink"></div>
+        <ul>
+          <li><b>#d53880</b></li>
+          <li>$pink</li>
+        </ul>
 
-      <div class="swatch swatch-pink"></div>
-      <ul>
-        <li><b>#d53880</b></li>
-        <li>$pink</li>
-      </ul>
+        <h4 class="heading-small">Baby pink</h4>
 
-      <h4 class="heading-small">Baby pink</h4>
+        <div class="swatch swatch-baby-pink"></div>
+        <ul>
+          <li><b>#f499be</b></li>
+          <li>$baby-pink</li>
+        </ul>
 
-      <div class="swatch swatch-baby-pink"></div>
-      <ul>
-        <li><b>#f499be</b></li>
-        <li>$baby-pink</li>
-      </ul>
+        <h4 class="heading-small">Red</h4>
 
-      <h4 class="heading-small">Red</h4>
+        <div class="swatch swatch-red"></div>
+        <ul>
+          <li><b>#b10e1e</b></li>
+          <li>$red</li>
+        </ul>
+      </div>
 
-      <div class="swatch swatch-red"></div>
-      <ul>
-        <li><b>#b10e1e</b></li>
-        <li>$red</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Mellow red</h4>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Mellow red</h4>
+        <div class="swatch swatch-mellow-red"></div>
+        <ul>
+          <li><b>#df3034</b></li>
+          <li>$mellow-red</li>
+        </ul>
 
-      <div class="swatch swatch-mellow-red"></div>
-      <ul>
-        <li><b>#df3034</b></li>
-        <li>$mellow-red</li>
-      </ul>
+        <h4 class="heading-small">Orange</h4>
 
-      <h4 class="heading-small">Orange</h4>
+        <div class="swatch swatch-orange"></div>
+        <ul>
+          <li><b>#f47738</b></li>
+          <li>$orange</li>
+        </ul>
 
-      <div class="swatch swatch-orange"></div>
-      <ul>
-        <li><b>#f47738</b></li>
-        <li>$orange</li>
-      </ul>
+        <h4 class="heading-small">Brown</h4>
 
-      <h4 class="heading-small">Brown</h4>
+        <div class="swatch swatch-brown"></div>
+        <ul>
+          <li><b>#b58840</b></li>
+          <li>$brown</li>
+        </ul>
+      </div>
 
-      <div class="swatch swatch-brown"></div>
-      <ul>
-        <li><b>#b58840</b></li>
-        <li>$brown</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Yellow</h4>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Yellow</h4>
+        <div class="swatch swatch-yellow"></div>
+        <ul>
+          <li><b>#ffbf47</b></li>
+          <li>$yellow</li>
+        </ul>
 
-      <div class="swatch swatch-yellow"></div>
-      <ul>
-        <li><b>#ffbf47</b></li>
-        <li>$yellow</li>
-      </ul>
+        <h4 class="heading-small">Green</h4>
 
-      <h4 class="heading-small">Green</h4>
+        <div class="swatch swatch-green"></div>
+        <ul>
+          <li><b>#006435</b></li>
+          <li>$green</li>
+        </ul>
 
-      <div class="swatch swatch-green"></div>
-      <ul>
-        <li><b>#006435</b></li>
-        <li>$green</li>
-      </ul>
+        <h4 class="heading-small">Grass green</h4>
 
-      <h4 class="heading-small">Grass green</h4>
+        <div class="swatch swatch-grass-green"></div>
+        <ul>
+          <li><b>#85994b</b></li>
+          <li>$grass-green</li>
+        </ul>
+      </div>
 
-      <div class="swatch swatch-grass-green"></div>
-      <ul>
-        <li><b>#85994b</b></li>
-        <li>$grass-green</li>
-      </ul>
-    </div>
+      <div class="swatch-wrapper">
+        <h4 class="heading-small">Turquoise</h4>
 
-    <div class="swatch-wrapper">
-      <h4 class="heading-small">Turquoise</h4>
+        <div class="swatch swatch-turquoise"></div>
+        <ul>
+          <li><b>#28a197</b></li>
+          <li>$turquoise</li>
+        </ul>
 
-      <div class="swatch swatch-turquoise"></div>
-      <ul>
-        <li><b>#28a197</b></li>
-        <li>$turquoise</li>
-      </ul>
+        <h4 class="heading-small">Light blue</h4>
 
-      <h4 class="heading-small">Light blue</h4>
+        <div class="swatch swatch-light-blue"></div>
+        <ul>
+          <li><b>#2b8cc4</b></li>
+          <li>$light-blue</li>
+        </ul>
 
-      <div class="swatch swatch-light-blue"></div>
-      <ul>
-        <li><b>#2b8cc4</b></li>
-        <li>$light-blue</li>
-      </ul>
+        <h4 class="heading-small">GOV.UK blue</h4>
 
-      <h4 class="heading-small">GOV.UK blue</h4>
+        <div class="swatch swatch-govuk-blue"></div>
+        <ul>
+          <li><b>#005ea5</b></li>
+          <li>$govuk-blue</li>
+        </ul>
 
-      <div class="swatch swatch-govuk-blue"></div>
-      <ul>
-        <li><b>#005ea5</b></li>
-        <li>$govuk-blue</li>
-      </ul>
+      </div>
 
     </div>
 
-  </div>
+    <p>
+      <a href="https://designpatterns.hackpad.com/Colour-PDuGV42pJqx" rel="external">
+        Discuss colour on the design patterns Hackpad
+      </a>
+    </p>
 
-  <p>
-    <a href="https://designpatterns.hackpad.com/Colour-PDuGV42pJqx" rel="external">
-      Discuss colour on the design patterns Hackpad
-    </a>
-  </p>
+    <h3 class="heading-medium" id="examples">Examples</h3>
+    <h4 class="heading-small">Transaction end page</h4>
 
-  <h3 class="heading-medium" id="examples">Examples</h3>
-  <h4 class="heading-small">Transaction end page</h4>
+    <div class="example">
 
-  <div class="example">
+    <div class="grid-row">
+      <div class="column-two-thirds">
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+          <h1 class="heading-xlarge">
+            Example service name
+          </h1>
 
-        <h1 class="heading-xlarge">
-          Example service name
-        </h1>
+          <div class="govuk-box-highlight">
+            <h2 class="bold-large">
+              Application complete
+            </h2>
+            <p>
+              Your reference number is </br>
+              <strong class="heading-medium">HDJ2123F</strong>
+            </p>
+          </div>
 
-        <div class="govuk-box-highlight">
-          <h2 class="bold-large">
-            Application complete
-          </h2>
           <p>
-            Your reference number is </br>
-            <strong class="heading-medium">HDJ2123F</strong>
+            We have sent you a confirmation email.
           </p>
-        </div>
-
-        <p>
-          We have sent you a confirmation email.
-        </p>
 
-        <h2 class="heading-medium">
-          What happens next?
-        </h2>
-        <p>
-          We've sent your application to Hackney Electoral Register Office.
-        </p>
-        <p>
-          They will contact you either to confirm your registration, or to ask for more information.
-        </p>
+          <h2 class="heading-medium">
+            What happens next?
+          </h2>
+          <p>
+            We've sent your application to Hackney Electoral Register Office.
+          </p>
+          <p>
+            They will contact you either to confirm your registration, or to ask for more information.
+          </p>
 
+        </div>
       </div>
     </div>
 
-  </div>
-
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_data.html b/views/guide_data.html
index 395355dfc..699e8f195 100755
--- a/views/guide_data.html
+++ b/views/guide_data.html
@@ -9,126 +9,129 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Data
-  </h1>
-
-  <p class="lede text">
-    Consider putting content into tables to make it easier to scan.
-  </p>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#data-table-numeric">Numeric tabular data</a></li>
-        <li><a href="#data-in-a-table">Data in a table</a></li>
-        <li><a href="#data-visualisation">Data visualisation</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
-    </div>
-  </div>
-
-  <h3 class="heading-medium" id="data-table-numeric">Numeric tabular data</h3>
-  <ul class="text list-bullet">
-    <li>when comparing rows of numbers, align numbers to the right in table cells</li>
-    <li>use the GOV.UK frontend toolkit's <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/mixins.md#tabular-numbers" rel="external">tabular numbers</a> to allow numbers of the same width to be more easily compared</li>
-  </ul>
-
-<div class="example">
-  {{> data_table_numeric }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> data_table_numeric }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="data-in-a-table">Data in a table</h3>
-  <p>
-    Not all content in tables should be right aligned.
-  </p>
-
-<div class="example">
-  {{> data_table }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> data_table }}
-</code>
-</pre>
-
-<p>
-  <a href="https://designpatterns.hackpad.com/Tables-AXM1FinduJR" rel="external">
-    Discuss tables on the design patterns Hackpad
-  </a>
-</p>
-
-  <h3 class="heading-medium" id="data-visualisation">Data visualisation</h3>
-  <ul class="list-bullet text">
-    <li>data is recommended as an alternative to using images</li>
-    <li>for screen readers, ensure the data value appears first so it makes sense when read aloud</li>
-  </ul>
-
-  <div class="example">
-    <div class="grid-row">
-      <div class="column-half">
+  <div class="text">
 
-        <div class="data">
-          <h2 class="bold-xxlarge">24</h2>
-          <p class="bold-xsmall">Ministerial departments</p>
-        </div>
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Data
+    </h1>
+
+    <p class="lede">
+      Consider putting content into tables to make it easier to scan.
+    </p>
 
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#data-table-numeric">Numeric tabular data</a></li>
+          <li><a href="#data-in-a-table">Data in a table</a></li>
+          <li><a href="#data-visualisation">Data visualisation</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
       </div>
-      <div class="column-half">
+    </div>
 
-        <div class="data">
-          <h2 class="bold-xxlarge">80px</h2>
-          <p class="bold-xsmall">16px</p>
-        </div>
+    <h3 class="heading-medium" id="data-table-numeric">Numeric tabular data</h3>
+    <ul class="list-bullet">
+      <li>when comparing rows of numbers, align numbers to the right in table cells</li>
+      <li>use the GOV.UK frontend toolkit's <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/mixins.md#tabular-numbers" rel="external">tabular numbers</a> to allow numbers of the same width to be more easily compared</li>
+    </ul>
 
-      </div>
+    <div class="example">
+      {{> data_table_numeric }}
     </div>
-  </div>
 
-  <div class="example">
-    <div class="grid-row">
-      <div class="column-half">
+    <pre>
+    <code class="language-markup">
+      {{> data_table_numeric }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="data-in-a-table">Data in a table</h3>
+    <p>
+      Not all content in tables should be right aligned.
+    </p>
+
+    <div class="example">
+      {{> data_table }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> data_table }}
+    </code>
+    </pre>
+
+    <p>
+      <a href="https://designpatterns.hackpad.com/Tables-AXM1FinduJR" rel="external">
+        Discuss tables on the design patterns Hackpad
+      </a>
+    </p>
+
+    <h3 class="heading-medium" id="data-visualisation">Data visualisation</h3>
+    <ul class="list-bullet">
+      <li>data is recommended as an alternative to using images</li>
+      <li>for screen readers, ensure the data value appears first so it makes sense when read aloud</li>
+    </ul>
+
+    <div class="example">
+      <div class="grid-row">
+        <div class="column-half">
+
+          <div class="data">
+            <h2 class="bold-xxlarge">24</h2>
+            <p class="bold-xsmall">Ministerial departments</p>
+          </div>
 
-        <div class="data">
-          <h2 class="bold-xlarge">56/154</h2>
-          <p class="bold-xsmall">on GOV.UK</p>
         </div>
+        <div class="column-half">
 
+          <div class="data">
+            <h2 class="bold-xxlarge">80px</h2>
+            <p class="bold-xsmall">16px</p>
+          </div>
+
+        </div>
       </div>
-      <div class="column-half">
+    </div>
+
+    <div class="example">
+      <div class="grid-row">
+        <div class="column-half">
+
+          <div class="data">
+            <h2 class="bold-xlarge">56/154</h2>
+            <p class="bold-xsmall">on GOV.UK</p>
+          </div>
 
-        <div class="data">
-          <h2 class="bold-xlarge">48px</h2>
-          <p class="bold-xsmall">16px</p>
         </div>
+        <div class="column-half">
 
+          <div class="data">
+            <h2 class="bold-xlarge">48px</h2>
+            <p class="bold-xsmall">16px</p>
+          </div>
+
+        </div>
       </div>
     </div>
-  </div>
-
-  <h3 class="heading-medium" id="examples">Examples</h3>
-  <ul class="list-bullet">
-    <li>
-      <a href="https://www.gov.uk/pay-leave-for-parents/y/yes/2013-1-2/employee/employee/yes/yes/122.00-week/yes/yes/yes/122.00-week/yes" rel="external">
-        see an example of table usage on GOV.UK
-      </a>
-    </li>
-    <li>
-      <a href="https://www.gov.uk/performance/carers-allowance/volumetrics" rel="external">
-        see an example of numeric table usage on GOV.UK
-      </a>
-    </li>
-  </ul>
 
+    <h3 class="heading-medium" id="examples">Examples</h3>
+    <ul class="list-bullet">
+      <li>
+        <a href="https://www.gov.uk/pay-leave-for-parents/y/yes/2013-1-2/employee/employee/yes/yes/122.00-week/yes/yes/yes/122.00-week/yes" rel="external">
+          see an example of table usage on GOV.UK
+        </a>
+      </li>
+      <li>
+        <a href="https://www.gov.uk/performance/carers-allowance/volumetrics" rel="external">
+          see an example of numeric table usage on GOV.UK
+        </a>
+      </li>
+    </ul>
+
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_errors.html b/views/guide_errors.html
index 26815de13..542503e1e 100755
--- a/views/guide_errors.html
+++ b/views/guide_errors.html
@@ -9,114 +9,115 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Errors and validation
-  </h1>
-
-  <p class="lede text">
-    Minimise the number of errors on a page.
-  </p>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#one-question-per-page">Ask one question per page</a></li>
-        <li><a href="#summarise-errors">Summarise errors</a></li>
-        <li><a href="#highlight-errors">Highlight errors in forms</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
+  <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Errors and validation
+    </h1>
+
+    <p class="lede">
+      Minimise the number of errors on a page.
+    </p>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#one-question-per-page">Ask one question per page</a></li>
+          <li><a href="#summarise-errors">Summarise errors</a></li>
+          <li><a href="#highlight-errors">Highlight errors in forms</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <h3 class="heading-medium" id="one-question-per-page">Ask one question per page</h3>
-  <div class="text">
-  <p>
-    Recovering from errors can be hard for users, especially if a page contains multiple errors.
-  </p>
-  <p>
-    Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question.
-  </p>
-  </div>
-
-  <h3 class="heading-medium" id="summarise-errors">
-    Summarise errors at the top of the page
-  </h3>
-
-  <p class="text lead-in">
-    You must:
-  </p>
-
-  <ul class="text list-bullet">
-    <li>show an error summary at the top of the page</li>
-    <li>include a heading to alert the user to the error</li>
-    <li>link to each of the problematic questions</li>
-  </ul>
-
-  <h4 class="heading-small">Error message and summary box</h4>
-<div class="example example-error">
-  {{> form_error_radio_show_errors }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> form_error_radio_show_errors }}
-</code>
-</pre>
-
-  <h3 class="heading-small panel-indent text">
-    The error summary must appear at the top of the page, so it is visible when the page is refreshed and is immediately read out by assistive technology.
-  </h3>
-
-  <h3 class="heading-medium" id="highlight-errors">Highlight errors in forms</h3>
-
-  <p class="lead-in">
-    For each error:
-  </p>
-
-  <ul class="list-bullet text">
-    <li>write a message that helps the user to understand why the error occurred and what to do about it</li>
-    <li>put the message in the <code class="code">&lt;label&gt;</code> or <code class="code">&lt;legend&gt;</code> for the question,
-    after the question text, in red</li>
-    <li>use a red border to visually connect the message and the question it belongs to</li>
-    <li>if the error relates to specific text fields within the question, give these a red border as well</li>
-  </ul>
-
-  <p class="text">
-    For red, use the <code class="code">$error-colour</code> Sass variable &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss</a> file.
-  </p>
-
-<div class="example example-error">
-  {{> form_error_multiple_show_errors }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> form_error_multiple_show_errors }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="examples">Examples</h3>
-  <ul class="list-bullet">
-    <li>
-      <a href="{{ site.baseurl}}/errors/example-form-validation-single-question-radio">
-        form validation - single question
-      </a>
-    </li>
-    <li>
-      <a href="{{ site.baseurl}}/errors/example-form-validation-multiple-questions">
-        form validation - multiple questions
-      </a>
-    </li>
-  </ul>
+    <h3 class="heading-medium" id="one-question-per-page">Ask one question per page</h3>
+    <p>
+      Recovering from errors can be hard for users, especially if a page contains multiple errors.
+    </p>
+    <p>
+      Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question.
+    </p>
+
+    <h3 class="heading-medium" id="summarise-errors">
+      Summarise errors at the top of the page
+    </h3>
+
+    <p class="lead-in">
+      You must:
+    </p>
+
+    <ul class="list-bullet">
+      <li>show an error summary at the top of the page</li>
+      <li>include a heading to alert the user to the error</li>
+      <li>link to each of the problematic questions</li>
+    </ul>
+
+    <h4 class="heading-small">Error message and summary box</h4>
+    <div class="example example-error">
+      {{> form_error_radio_show_errors }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> form_error_radio_show_errors }}
+    </code>
+    </pre>
+
+    <h3 class="heading-small panel-indent text">
+      The error summary must appear at the top of the page, so it is visible when the page is refreshed and is immediately read out by assistive technology.
+    </h3>
 
-  <p>
-    <a href="https://designpatterns.hackpad.com/Error-messages-and-validation-IWrPNxjRthP" rel="external">
-      Discuss error messages and validation on the design patterns Hackpad
-    </a>
-  </p>
+    <h3 class="heading-medium" id="highlight-errors">Highlight errors in forms</h3>
+
+    <p class="lead-in">
+      For each error:
+    </p>
+
+    <ul class="list-bullet">
+      <li>write a message that helps the user to understand why the error occurred and what to do about it</li>
+      <li>put the message in the <code class="code">&lt;label&gt;</code> or <code class="code">&lt;legend&gt;</code> for the question,
+      after the question text, in red</li>
+      <li>use a red border to visually connect the message and the question it belongs to</li>
+      <li>if the error relates to specific text fields within the question, give these a red border as well</li>
+    </ul>
+
+    <p>
+      For red, use the <code class="code">$error-colour</code> Sass variable &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss</a> file.
+    </p>
+
+    <div class="example example-error">
+      {{> form_error_multiple_show_errors }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> form_error_multiple_show_errors }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="examples">Examples</h3>
+    <ul class="list-bullet">
+      <li>
+        <a href="{{ site.baseurl}}/errors/example-form-validation-single-question-radio">
+          form validation - single question
+        </a>
+      </li>
+      <li>
+        <a href="{{ site.baseurl}}/errors/example-form-validation-multiple-questions">
+          form validation - multiple questions
+        </a>
+      </li>
+    </ul>
+
+    <p>
+      <a href="https://designpatterns.hackpad.com/Error-messages-and-validation-IWrPNxjRthP" rel="external">
+        Discuss error messages and validation on the design patterns Hackpad
+      </a>
+    </p>
 
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_form_elements.html b/views/guide_form_elements.html
index 11e95a104..cd5642451 100755
--- a/views/guide_form_elements.html
+++ b/views/guide_form_elements.html
@@ -9,64 +9,64 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Form elements
-  </h1>
-
-  <p class="lede text">
-    Keep forms as simple as possible &ndash; only ask what's needed to run your service.
-  </p>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#form-optional-fields">Optional and mandatory fields</a></li>
-        <li><a href="#form-labels">Labels</a></li>
-        <li><a href="#form-fields">Form fields</a></li>
-        <li><a href="#form-focus-states">Form focus states</a></li>
-        <li><a href="#form-hint-text">Hint text</a></li>
-        <li><a href="#form-spacing">Spacing</a></li>
-        <li><a href="#form-fieldsets">Fieldsets</a></li>
-        <li><a href="#form-select-boxes">Select boxes</a></li>
-        <li><a href="#form-radio-buttons">Radio buttons</a></li>
-        <li><a href="#form-checkboxes">Checkboxes</a></li>
-        <li><a href="#form-toggle-content">Conditionally revealing content</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
-    </div>
-  </div>
-
-
-  <h3 class="heading-medium" id="form-optional-fields">Optional and mandatory fields</h3>
-  <ul class="text list-bullet">
-    <li>only ask for the information you absolutely need</li>
-    <li>if you do ask for optional information, mark the labels of optional fields with '(optional)'</li>
-    <li>don't mark mandatory fields with asterisks</li>
-  </ul>
-
-  <h3 class="heading-medium" id="form-labels">Labels</h3>
-  <ul class="text list-bullet">
-    <li>all form fields should be given labels</li>
-    <li>don't hide labels, unless the surrounding context makes them unnecessary</li>
-    <li>labels should be aligned above their fields</li>
-    <li>label text should be short, direct and in sentence case</li>
-    <li>avoid colons at the end of labels</li>
-    <li>labels should be associated with form fields using the <code class="code">for</code> attribute</li>
-  </ul>
-  <div class="example">
-    {{> form_labels }}
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_labels }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="form-fields">Form fields</h3>
   <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Form elements
+    </h1>
+
+    <p class="lede">
+      Keep forms as simple as possible &ndash; only ask what's needed to run your service.
+    </p>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#form-optional-fields">Optional and mandatory fields</a></li>
+          <li><a href="#form-labels">Labels</a></li>
+          <li><a href="#form-fields">Form fields</a></li>
+          <li><a href="#form-focus-states">Form focus states</a></li>
+          <li><a href="#form-hint-text">Hint text</a></li>
+          <li><a href="#form-spacing">Spacing</a></li>
+          <li><a href="#form-fieldsets">Fieldsets</a></li>
+          <li><a href="#form-select-boxes">Select boxes</a></li>
+          <li><a href="#form-radio-buttons">Radio buttons</a></li>
+          <li><a href="#form-checkboxes">Checkboxes</a></li>
+          <li><a href="#form-toggle-content">Conditionally revealing content</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <h3 class="heading-medium" id="form-optional-fields">Optional and mandatory fields</h3>
+    <ul class="list-bullet">
+      <li>only ask for the information you absolutely need</li>
+      <li>if you do ask for optional information, mark the labels of optional fields with '(optional)'</li>
+      <li>don't mark mandatory fields with asterisks</li>
+    </ul>
+
+    <h3 class="heading-medium" id="form-labels">Labels</h3>
+    <ul class="list-bullet">
+      <li>all form fields should be given labels</li>
+      <li>don't hide labels, unless the surrounding context makes them unnecessary</li>
+      <li>labels should be aligned above their fields</li>
+      <li>label text should be short, direct and in sentence case</li>
+      <li>avoid colons at the end of labels</li>
+      <li>labels should be associated with form fields using the <code class="code">for</code> attribute</li>
+    </ul>
+    <div class="example">
+      {{> form_labels }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> form_labels }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="form-fields">Form fields</h3>
     <p>
       Make field widths proportional to the input they take.
     </p>
@@ -76,210 +76,210 @@ <h3 class="heading-medium" id="form-fields">Form fields</h3>
     <p>
       Snap form fields to 100% width at smaller screen sizes.
     </p>
-  </div>
 
-  <p>
-    <a href="https://designpatterns.hackpad.com/Text-boxes-imgij2JcsHO" rel="external">
-      Discuss form fields on the design patterns Hackpad
-    </a>
-  </p>
+    <p>
+      <a href="https://designpatterns.hackpad.com/Text-boxes-imgij2JcsHO" rel="external">
+        Discuss form fields on the design patterns Hackpad
+      </a>
+    </p>
 
-  <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
-  <div class="text">
+    <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
     <p>
       All elements use the yellow focus style as a highlight, as either a fill or 3px outline.
     </p>
     <p>
       Click on the label "Full name" or inside the form field to show the focus state.
     </p>
-  </div>
-
-  <div class="example">
-    {{> form_focus }}
-  </div>
-
-  <h3 class="heading-medium"  id="form-hint-text">Hint text</h3>
-  <ul class="list-bullet text">
-    <li>don't use placeholder text in form fields, as this will disappear once content is entered into the form field</li>
-    <li>use hint text for supporting contextual help, this will always be shown</li>
-    <li>hint text should sit above a form field</li>
-    <li>ensure hint text can be read correctly by screen readers</li>
-  </ul>
-
-  <div class="example">
-    {{> form_hint_text }}
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_hint_text }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="form-spacing">Spacing between form elements</h3>
-  <p class="text">
-    Ensure there is sufficient spacing between form elements.
-  </p>
-
-  <div class="example">
-    {{> form_spacing }}
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_spacing }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="form-fieldsets">Fieldsets and legends</h3>
-  <p class="text">
-    Use fieldsets to group related form controls. The first element inside a fieldset must be a <code class="code">legend</code> element which describes the group.
-  </p>
-
-  <h3 class="heading-medium" id="form-select-boxes">Select boxes</h3>
-  <p class="text">
-    Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.
-  </p>
-
-  <p>
-    <a href="https://designpatterns.hackpad.com/Select-boxes-KzQ1IRd07HL" rel="external">
-      Discuss select boxes on the design patterns Hackpad
-    </a>
-  </p>
-
-  <h3 class="heading-medium" id="form-radio-buttons">Radio buttons</h3>
-  <ul class="list-bullet text">
-    <li>use these to let users choose a single option from a list</li>
-    <li>for more than two options, radio buttons should be stacked</li>
-    <li>radio buttons with large hit areas are easier to select with a mouse or touch devices</li>
-  </ul>
-
-  <h4 class="heading-small">Inline radio buttons</h4>
-  <div class="example">
-    <form>
+
+    <div class="example">
+      {{> form_focus }}
+    </div>
+
+    <h3 class="heading-medium"  id="form-hint-text">Hint text</h3>
+    <ul class="list-bullet">
+      <li>don't use placeholder text in form fields, as this will disappear once content is entered into the form field</li>
+      <li>use hint text for supporting contextual help, this will always be shown</li>
+      <li>hint text should sit above a form field</li>
+      <li>ensure hint text can be read correctly by screen readers</li>
+    </ul>
+
+    <div class="example">
+      {{> form_hint_text }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> form_hint_text }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="form-spacing">Spacing between form elements</h3>
+    <p>
+      Ensure there is sufficient spacing between form elements.
+    </p>
+
+    <div class="example">
+      {{> form_spacing }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> form_spacing }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="form-fieldsets">Fieldsets and legends</h3>
+    <p>
+      Use fieldsets to group related form controls. The first element inside a fieldset must be a <code class="code">legend</code> element which describes the group.
+    </p>
+
+    <h3 class="heading-medium" id="form-select-boxes">Select boxes</h3>
+    <p>
+      Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.
+    </p>
+
+    <p>
+      <a href="https://designpatterns.hackpad.com/Select-boxes-KzQ1IRd07HL" rel="external">
+        Discuss select boxes on the design patterns Hackpad
+      </a>
+    </p>
+
+    <h3 class="heading-medium" id="form-radio-buttons">Radio buttons</h3>
+    <ul class="list-bullet">
+      <li>use these to let users choose a single option from a list</li>
+      <li>for more than two options, radio buttons should be stacked</li>
+      <li>radio buttons with large hit areas are easier to select with a mouse or touch devices</li>
+    </ul>
+
+    <h4 class="heading-small">Inline radio buttons</h4>
+    <div class="example">
+      <form>
+        {{> form_radio_buttons_inline }}
+      </form>
+    </div>
+
+    <pre>
+    <code class="language-markup">
       {{> form_radio_buttons_inline }}
-    </form>
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_radio_buttons_inline }}
-</code>
-</pre>
-
-  <h4 class="heading-small">Stacked radio buttons</h4>
-  <div class="example">
-    <form>
+    </code>
+    </pre>
+
+    <h4 class="heading-small">Stacked radio buttons</h4>
+    <div class="example">
+      <form>
+        {{> form_radio_buttons }}
+      </form>
+    </div>
+
+    <pre>
+    <code class="language-markup">
       {{> form_radio_buttons }}
-    </form>
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_radio_buttons }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="form-checkboxes">Checkboxes</h3>
-  <ul class="list-bullet text">
-    <li>use these to select either on/off toggles or multiple selections</li>
-    <li>make it clear with words when users can select one or multiple options</li>
-  </ul>
-
-  <h4 class="heading-small">Stacked checkboxes</h4>
-  <div class="example">
-    <form>
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="form-checkboxes">Checkboxes</h3>
+    <ul class="list-bullet">
+      <li>use these to select either on/off toggles or multiple selections</li>
+      <li>make it clear with words when users can select one or multiple options</li>
+    </ul>
+
+    <h4 class="heading-small">Stacked checkboxes</h4>
+    <div class="example">
+      <form>
+        {{> form_checkboxes }}
+      </form>
+    </div>
+
+    <pre>
+    <code class="language-markup">
       {{> form_checkboxes }}
-    </form>
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_checkboxes }}
-</code>
-</pre>
-
-  <h4 class="heading-small">Inline checkboxes</h4>
-  <ul class="list-bullet text">
-    <li>large hit areas aren't always appropriate</li>
-    <li>only pre-select options if there's a strong, user-centred reason to</li>
-  </ul>
-
-  <div class="example">
-    <form>
+    </code>
+    </pre>
+
+    <h4 class="heading-small">Inline checkboxes</h4>
+    <ul class="list-bullet">
+      <li>large hit areas aren't always appropriate</li>
+      <li>only pre-select options if there's a strong, user-centred reason to</li>
+    </ul>
+
+    <div class="example">
+      <form>
+        {{> form_checkbox_native }}
+      </form>
+    </div>
+
+    <pre>
+    <code class="language-markup">
       {{> form_checkbox_native }}
-    </form>
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_checkbox_native }}
-</code>
-</pre>
-
-<p>
-  <a href="https://designpatterns.hackpad.com/Radio-buttons-and-checkboxes-8eBuLm9eRaz" rel="external">
-    Discuss radio buttons and checkboxes on the design patterns Hackpad
-  </a>
-</p>
-
-  <h3 class="heading-medium" id="form-toggle-content">
-    Conditionally revealing content
-  </h3>
-  <ul class="list-bullet text">
-    <li>reveal additional questions, depending on the context</li>
-    <li>insets are used to emphasise this supporting information</li>
-  </ul>
-
-  <p>
-    <a href="https://designpatterns.hackpad.com/Conditional-form-fields-powy4GQmLIx" rel="external">
-      Discuss conditional form fields on the design patterns Hackpad
-    </a>
-  </p>
-
-  <h4 class="heading-small" id="form-toggle-content-radios">
-    Radio buttons
-  </h4>
-  <p>
-    Click on "Yes" to see how this works.
-  </p>
-  <div class="example">
-    <form>
+    </code>
+    </pre>
+
+    <p>
+      <a href="https://designpatterns.hackpad.com/Radio-buttons-and-checkboxes-8eBuLm9eRaz" rel="external">
+        Discuss radio buttons and checkboxes on the design patterns Hackpad
+      </a>
+    </p>
+
+    <h3 class="heading-medium" id="form-toggle-content">
+      Conditionally revealing content
+    </h3>
+    <ul class="list-bullet">
+      <li>reveal additional questions, depending on the context</li>
+      <li>insets are used to emphasise this supporting information</li>
+    </ul>
+
+    <p>
+      <a href="https://designpatterns.hackpad.com/Conditional-form-fields-powy4GQmLIx" rel="external">
+        Discuss conditional form fields on the design patterns Hackpad
+      </a>
+    </p>
+
+    <h4 class="heading-small" id="form-toggle-content-radios">
+      Radio buttons
+    </h4>
+    <p>
+      Click on "Yes" to see how this works.
+    </p>
+
+    <div class="example">
+      <form>
+        {{> form_inset_radios }}
+      </form>
+    </div>
+
+    <pre>
+    <code class="language-markup">
       {{> form_inset_radios }}
-    </form>
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_inset_radios }}
-</code>
-</pre>
-
-  <h4 class="heading-small" id="form-toggle-content-checkboxes">
-    Checkboxes
-  </h4>
-  <p>
-    Click on "Citizen of a different country" to see how this works.
-  </p>
-  <div class="example">
-    <form>
+    </code>
+    </pre>
+
+    <h4 class="heading-small" id="form-toggle-content-checkboxes">
+      Checkboxes
+    </h4>
+    <p>
+      Click on "Citizen of a different country" to see how this works.
+    </p>
+
+    <div class="example">
+      <form>
+        {{> form_inset_checkboxes }}
+      </form>
+    </div>
+
+    <pre>
+    <code class="language-markup">
       {{> form_inset_checkboxes }}
-    </form>
-  </div>
-
-<pre>
-<code class="language-markup">
-  {{> form_inset_checkboxes }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="examples">Examples</h3>
-  <ul class="list-bullet">
-    <li><a href="{{site.baseurl}}/form-elements/example-form-elements/">form elements</a></li>
-    <li><a href="{{site.baseurl}}/form-elements/example-date/">date pattern</a></li>
-    <li><a href="{{site.baseurl}}/form-elements/example-radios-checkboxes/">radio buttons and checkboxes</a></li>
-  </ul>
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="examples">Examples</h3>
+    <ul class="list-bullet">
+      <li><a href="{{site.baseurl}}/form-elements/example-form-elements/">form elements</a></li>
+      <li><a href="{{site.baseurl}}/form-elements/example-date/">date pattern</a></li>
+      <li><a href="{{site.baseurl}}/form-elements/example-radios-checkboxes/">radio buttons and checkboxes</a></li>
+    </ul>
 
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_icons_images.html b/views/guide_icons_images.html
index 8ef765902..fd88ff011 100755
--- a/views/guide_icons_images.html
+++ b/views/guide_icons_images.html
@@ -9,56 +9,59 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Icons and images
-  </h1>
+  <div class="text">
 
-  <p class="lede text">
-    Avoid unnecessary decoration - only use icons and images if there's a real user need.
-  </p>
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Icons and images
+    </h1>
 
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#icons">Icons</a></li>
-        <li><a href="#images">Images</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
+    <p class="lede">
+      Avoid unnecessary decoration - only use icons and images if there's a real user need.
+    </p>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#icons">Icons</a></li>
+          <li><a href="#images">Images</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <h3 class="heading-medium" id="icons">Icons</h3>
-  <ul class="list-bullet text">
-    <li>
-      if icons are needed ensure they are clear, simple and accompanied by relevant text
-    </li>
-    <li>
-      don’t hide functionality under icons
-    </li>
-  </ul>
+    <h3 class="heading-medium" id="icons">Icons</h3>
+    <ul class="list-bullet">
+      <li>
+        if icons are needed ensure they are clear, simple and accompanied by relevant text
+      </li>
+      <li>
+        don’t hide functionality under icons
+      </li>
+    </ul>
 
-  <p class="text">
-    GOV.UK standard icons are provided, as well as organisation crests and media player icons &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/tree/master/images" rel="external">images folder</a>.
-  </p>
+    <p>
+      GOV.UK standard icons are provided, as well as organisation crests and media player icons &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/tree/master/images" rel="external">images folder</a>.
+    </p>
 
-  <h3 class="heading-medium" id="images">Images</h3>
-  <p>
-    If images are needed they should be landscape, 3:2 aspect ratio.
-  </p>
+    <h3 class="heading-medium" id="images">Images</h3>
+    <p>
+      If images are needed they should be landscape, 3:2 aspect ratio.
+    </p>
 
-  <div class="example example-images">
-    <div class="grid-row">
-      <div class="column-half">
-        <img src="/public/images/examples/3by2.jpg" alt="3:2">
-      </div>
-      <div class="column-half">
-        <img src="/public/images/examples/pm.jpg" alt="">
+    <div class="example example-images">
+      <div class="grid-row">
+        <div class="column-half">
+          <img src="/public/images/examples/3by2.jpg" alt="3:2">
+        </div>
+        <div class="column-half">
+          <img src="/public/images/examples/pm.jpg" alt="">
+        </div>
       </div>
     </div>
-  </div>
 
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_layout.html b/views/guide_layout.html
index 70c46e23d..39fba325c 100755
--- a/views/guide_layout.html
+++ b/views/guide_layout.html
@@ -9,32 +9,31 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Layout
-  </h1>
-
   <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Layout
+    </h1>
+
     <p class="lede">
       Use white space to create a visual hierarchy on the page.
     </p>
-  </div>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#page-width">Page width</a></li>
-        <li><a href="#screen-size">Screen size</a></li>
-        <li><a href="#layout-spacing">Spacing</a></li>
-        <li><a href="#layout-grid-unit-proportions">Grid unit proportions</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#page-width">Page width</a></li>
+          <li><a href="#screen-size">Screen size</a></li>
+          <li><a href="#layout-spacing">Spacing</a></li>
+          <li><a href="#layout-grid-unit-proportions">Grid unit proportions</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <h3 class="heading-medium" id="page-width">Page width</h3>
-  <div class="text">
+    <h3 class="heading-medium" id="page-width">Page width</h3>
     <p>
       The default maximum page width is 1020px, but go wider if the content requires it.
     </p>
@@ -44,98 +43,96 @@ <h3 class="heading-medium" id="page-width">Page width</h3>
     <p>
       Long lines reduce legibility, so all lines of text should be no longer than 70 to 80 characters.
     </p>
-  </div>
 
-  <h3 class="heading-medium" id="screen-size">Screen size</h3>
-  <div class="text">
+    <h3 class="heading-medium" id="screen-size">Screen size</h3>
     <p>
       Design for small screens first using a single column layout.
     </p>
      <p>
       Optimise for different screen sizes, but don’t make assumptions about what devices people are using.
     </p>
-  </div>
-
-  <h3 class="heading-medium" id="layout-spacing">Spacing</h3>
-  <ul class="list-bullet text">
-    <li>spacing between elements is usually 5px, 10px, 15px or multiples of 15px</li>
-    <li>gutters are 15px for smaller screens and 30px for larger screens</li>
-  </ul>
-
-  <div class="example example-images">
-    {{> layout_spacing }}
-  </div>
-
-  <h3 class="heading-medium" id="layout-grid-unit-proportions">Grid unit proportions</h3>
-  <ul class="list-bullet text">
-    <li>introduce columns as the content requires it – base column ratios on halves, thirds or quarters of the page width</li>
-    <li>for screen breakpoints use media queries &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_conditionals.scss">_conditionals.scss</a> file</li>
-  </ul>
-
-<h4 class="heading-medium">Halves</h4>
-<div class="example example-grid">
-  {{> layout_grid_halves }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> layout_grid_halves }}
-</code>
-</pre>
-
-<h4 class="heading-medium">Thirds</h4>
-<div class="example example-grid">
-  {{> layout_grid_thirds }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> layout_grid_thirds }}
-</code>
-</pre>
-
-<h4 class="heading-medium">Two thirds / One third</h4>
-<div class="example example-grid">
-  {{> layout_grid_thirds_two_thirds_one_third }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> layout_grid_thirds_two_thirds_one_third }}
-</code>
-</pre>
-
-<h4 class="heading-medium">One third / Two thirds</h4>
-<div class="example example-grid">
-  {{> layout_grid_thirds_one_third_two_thirds }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> layout_grid_thirds_one_third_two_thirds }}
-</code>
-</pre>
-
-<h4 class="heading-medium">Quarters</h4>
-<div class="example example-grid">
-  {{> layout_grid_quarters }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> layout_grid_quarters }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="examples">Examples</h3>
-  <ul class="list-bullet">
-    <li>
-      <a href="{{ site.baseurl}}/layout/example-grid-layout/">
-        an example grid layout page
-      </a>
-    </li>
-  </ul>
 
+    <h3 class="heading-medium" id="layout-spacing">Spacing</h3>
+    <ul class="list-bullet">
+      <li>spacing between elements is usually 5px, 10px, 15px or multiples of 15px</li>
+      <li>gutters are 15px for smaller screens and 30px for larger screens</li>
+    </ul>
+
+    <div class="example example-images">
+      {{> layout_spacing }}
+    </div>
+
+    <h3 class="heading-medium" id="layout-grid-unit-proportions">Grid unit proportions</h3>
+    <ul class="list-bullet">
+      <li>introduce columns as the content requires it – base column ratios on halves, thirds or quarters of the page width</li>
+      <li>for screen breakpoints use media queries &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_conditionals.scss">_conditionals.scss</a> file</li>
+    </ul>
+
+    <h4 class="heading-medium">Halves</h4>
+    <div class="example example-grid">
+      {{> layout_grid_halves }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> layout_grid_halves }}
+    </code>
+    </pre>
+
+    <h4 class="heading-medium">Thirds</h4>
+    <div class="example example-grid">
+      {{> layout_grid_thirds }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> layout_grid_thirds }}
+    </code>
+    </pre>
+
+    <h4 class="heading-medium">Two thirds / One third</h4>
+    <div class="example example-grid">
+      {{> layout_grid_thirds_two_thirds_one_third }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> layout_grid_thirds_two_thirds_one_third }}
+    </code>
+    </pre>
+
+    <h4 class="heading-medium">One third / Two thirds</h4>
+    <div class="example example-grid">
+      {{> layout_grid_thirds_one_third_two_thirds }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> layout_grid_thirds_one_third_two_thirds }}
+    </code>
+    </pre>
+
+    <h4 class="heading-medium">Quarters</h4>
+    <div class="example example-grid">
+      {{> layout_grid_quarters }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> layout_grid_quarters }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="examples">Examples</h3>
+    <ul class="list-bullet">
+      <li>
+        <a href="{{ site.baseurl}}/layout/example-grid-layout/">
+          an example grid layout page
+        </a>
+      </li>
+    </ul>
+
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/guide_typography.html b/views/guide_typography.html
index c40b3015b..067cb04cb 100755
--- a/views/guide_typography.html
+++ b/views/guide_typography.html
@@ -9,194 +9,184 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <h1 class="heading-xlarge">
-    <span class="heading-secondary">GOV.UK elements</span>
-    Typography
-  </h1>
-
   <div class="text">
+
+    <h1 class="heading-xlarge">
+      <span class="heading-secondary">GOV.UK elements</span>
+      Typography
+    </h1>
+
     <p class="lede">
       For GOV.UK domains, always use the GDS Transport Website font in Light and Bold.
     </p>
-  </div>
-
-  <h2 class="heading-small heading-contents">Contents:</h2>
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <ul class="list list-contents">
-        <li><a href="#typography-font">Font</a></li>
-        <li><a href="#typography-headings">Headings</a></li>
-        <li><a href="#typography-lead-paragraph">Lead paragraph</a></li>
-        <li><a href="#typography-body-copy">Body copy</a></li>
-        <li><a href="#typography-links">Links</a></li>
-        <li><a href="#typography-lists">Lists</a></li>
-        <li><a href="#typography-inset-text">Inset text</a></li>
-        <li><a href="#typography-hidden-text">Hidden text</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
+
+    <h2 class="heading-small heading-contents">Contents:</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <ul class="list list-contents">
+          <li><a href="#typography-font">Font</a></li>
+          <li><a href="#typography-headings">Headings</a></li>
+          <li><a href="#typography-lead-paragraph">Lead paragraph</a></li>
+          <li><a href="#typography-body-copy">Body copy</a></li>
+          <li><a href="#typography-links">Links</a></li>
+          <li><a href="#typography-lists">Lists</a></li>
+          <li><a href="#typography-inset-text">Inset text</a></li>
+          <li><a href="#typography-hidden-text">Hidden text</a></li>
+          <li><a href="#examples">Examples</a></li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <h3 class="heading-medium" id="typography-font">Font</h3>
-  <div class="text">
+    <h3 class="heading-medium" id="typography-font">Font</h3>
     <p>
       Use the GDS Transport Website font in Light and Bold. It's licensed for use on the GOV.UK domains only.
     </p>
     <p>
       For services publicly available on different domains, use an alternative typeface like Arial.
     </p>
-  </div>
-
-  <h3 class="heading-medium" id="typography-headings">
-    Headings
-  </h3>
-
-  <ul class="list-bullet text">
-    <li>use GDS Transport Website Bold</li>
-    <li>use sentence case for headings</li>
-    <li>use headings consistently to create a clear hierarchy</li>
-  </ul>
-
-<div class="example">
-  {{> typography_headings_example }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_headings }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="typography-lead-paragraph">
-    Lead paragraph
-  </h3>
-
-  <ul class="list-bullet">
-    <li>use 24px for a lead paragraph</li>
-    <li>there should only be one lead paragraph per page</li>
-  </ul>
-
-<div class="example">
-  <div class="text">
-    {{> typography_lead_paragraph_example }}
-  </div>
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_lead_paragraph }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="typography-body-copy">
-    Body copy
-  </h3>
-
-  <ul class="list-bullet text">
-    <li>use GDS Transport Website Light</li>
-    <li>avoid using bold and italics</li>
-    <li>use 19px for body copy &ndash; 16px for smaller screens</li>
-    <li>use smaller sizes only if there's a user need (eg 16px, 14px, 12px)</li>
-    <li>make sure lines of text don't exceed 75 characters, as they become harder to read beyond that point</li>
-  </ul>
-
-<div class="example">
-  <div class="text">
-    {{> typography_paragraphs_example }}
-  </div>
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_paragraphs }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="typography-links">Links</h3>
-  <ul class="list-bullet text">
-    <li>links within body copy should be blue and underlined</li>
-    <li>links without surrounding text should not have a full stop at the end</li>
-    <li>link colours can be found in the <a href="{{site.baseurl}}/colour">colour palette</a></li>
-  </ul>
-
-<div class="example">
-  <div class="text">
-    {{> typography_links }}
-  </div>
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_links }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="typography-lists">Lists</h3>
-  <p class="text">
-    List items start with a lowercase letter and have no full stop at the end.
-  </p>
-
-<div class="example">
-  {{> typography_lists }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_lists }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="typography-inset-text">Inset text</h3>
-  <p class="text">
-    Use bordered inset text to draw attention to important content on the page.
-  </p>
-
-<div class="example">
-  <div class="text">
-    {{> typography_inset_text }}
-  </div>
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_inset_text }}
-</code>
-</pre>
-
-  <h3 class="heading-medium" id="typography-hidden-text">Hidden text (progressive disclosure)</h3>
-  <p class="text">
-    Use this to make your page easier to scan,
-    only showing contextual information when required.
-  </p>
-  <p class="text">
-    Click on "Help with nationality" to see how this works.
-  </p>
-
-<div class="example">
-  {{> typography_progressive_disclosure }}
-</div>
-
-<pre>
-<code class="language-markup">
-  {{> typography_progressive_disclosure }}
-</code>
-</pre>
-
-
-  <h3 class="heading-medium" id="examples">Examples</h3>
-  <ul class="list-bullet">
-    <li>
-      <a href="{{ site.baseurl}}/typography/example-typography/">
-        an example typography page
-      </a>
-    </li>
-    <li>
-      <a href="{{ site.baseurl}}/typography/example-details-summary/">
-        the HTML details and summary elements (an example of progressive disclosure)
-      </a>
-    </li>
-  </ul>
 
+    <h3 class="heading-medium" id="typography-headings">
+      Headings
+    </h3>
+
+    <ul class="list-bullet">
+      <li>use GDS Transport Website Bold</li>
+      <li>use sentence case for headings</li>
+      <li>use headings consistently to create a clear hierarchy</li>
+    </ul>
+
+    <div class="example">
+      {{> typography_headings_example }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_headings }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="typography-lead-paragraph">
+      Lead paragraph
+    </h3>
+
+    <ul class="list-bullet">
+      <li>use 24px for a lead paragraph</li>
+      <li>there should only be one lead paragraph per page</li>
+    </ul>
+
+    <div class="example">
+      {{> typography_lead_paragraph_example }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_lead_paragraph }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="typography-body-copy">
+      Body copy
+    </h3>
+
+    <ul class="list-bullet">
+      <li>use GDS Transport Website Light</li>
+      <li>avoid using bold and italics</li>
+      <li>use 19px for body copy &ndash; 16px for smaller screens</li>
+      <li>use smaller sizes only if there's a user need (eg 16px, 14px, 12px)</li>
+      <li>make sure lines of text don't exceed 75 characters, as they become harder to read beyond that point</li>
+    </ul>
+
+    <div class="example">
+      {{> typography_paragraphs_example }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_paragraphs }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="typography-links">Links</h3>
+    <ul class="list-bullet">
+      <li>links within body copy should be blue and underlined</li>
+      <li>links without surrounding text should not have a full stop at the end</li>
+      <li>link colours can be found in the <a href="{{site.baseurl}}/colour">colour palette</a></li>
+    </ul>
+
+    <div class="example">
+      {{> typography_links }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_links }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="typography-lists">Lists</h3>
+    <p>
+      List items start with a lowercase letter and have no full stop at the end.
+    </p>
+
+    <div class="example">
+      {{> typography_lists }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_lists }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="typography-inset-text">Inset text</h3>
+    <p>
+      Use bordered inset text to draw attention to important content on the page.
+    </p>
+
+    <div class="example">
+      {{> typography_inset_text }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_inset_text }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="typography-hidden-text">Hidden text (progressive disclosure)</h3>
+    <p>
+      Use this to make your page easier to scan,
+      only showing contextual information when required.
+    </p>
+    <p>
+      Click on "Help with nationality" to see how this works.
+    </p>
+
+    <div class="example">
+      {{> typography_progressive_disclosure }}
+    </div>
+
+    <pre>
+    <code class="language-markup">
+      {{> typography_progressive_disclosure }}
+    </code>
+    </pre>
+
+    <h3 class="heading-medium" id="examples">Examples</h3>
+    <ul class="list-bullet">
+      <li>
+        <a href="{{ site.baseurl}}/typography/example-typography/">
+          an example typography page
+        </a>
+      </li>
+      <li>
+        <a href="{{ site.baseurl}}/typography/example-details-summary/">
+          the HTML details and summary elements (an example of progressive disclosure)
+        </a>
+      </li>
+    </ul>
+
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}
 
diff --git a/views/index.html b/views/index.html
index 1bf948de5..5537771bd 100755
--- a/views/index.html
+++ b/views/index.html
@@ -9,117 +9,119 @@
   {{>phase_banner}}
   {{>breadcrumb}}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="text">
+    <div class="grid-row">
+      <div class="column-two-thirds">
 
-      <h1 class="heading-xlarge">
-        GOV.UK elements
-      </h1>
+        <h1 class="heading-xlarge">
+          GOV.UK elements
+        </h1>
 
-      <p class="lede">
-        This guide shows how to make your service look consistent with the rest of GOV.UK.
-      </p>
+        <p class="lede">
+          This guide shows how to make your service look consistent with the rest of GOV.UK.
+        </p>
 
+      </div>
     </div>
-  </div>
 
-  <div class="grid-row">
-    <div class="column-third">
+    <div class="grid-row">
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/layout/">Layout</a></h2>
-      <p>
-        Grid unit proportions, gutters and spacing.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/layout/">Layout</a></h2>
+        <p>
+          Grid unit proportions, gutters and spacing.
+        </p>
 
-    </div>
-    <div class="column-third">
+      </div>
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/typography/">Typography</a></h2>
-      <p>
-        Headings, body text, links, lists, inset text, hidden text.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/typography/">Typography</a></h2>
+        <p>
+          Headings, body text, links, lists, inset text, hidden text.
+        </p>
 
-    </div>
-    <div class="column-third">
+      </div>
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/colour/">Colour</a></h2>
-      <p>
-        Colour contrast, Sass variables, colour palettes.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/colour/">Colour</a></h2>
+        <p>
+          Colour contrast, Sass variables, colour palettes.
+        </p>
 
+      </div>
     </div>
-  </div>
 
-  <div class="grid-row">
-    <div class="column-third">
+    <div class="grid-row">
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/icons-images/">Icons and images</a></h2>
-      <p>
-        Icons and image ratios.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/icons-images/">Icons and images</a></h2>
+        <p>
+          Icons and image ratios.
+        </p>
 
-    </div>
-    <div class="column-third">
+      </div>
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/data/">Data</a></h2>
-      <p>
-        Data in a table, numeric tabular data, data visualisation.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/data/">Data</a></h2>
+        <p>
+          Data in a table, numeric tabular data, data visualisation.
+        </p>
 
-    </div>
-    <div class="column-third">
+      </div>
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/buttons/">Buttons</a></h2>
-      <p>
-        Button text, button alignment, creating buttons.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/buttons/">Buttons</a></h2>
+        <p>
+          Button text, button alignment, creating buttons.
+        </p>
 
+      </div>
     </div>
-  </div>
 
-  <div class="grid-row">
-    <div class="column-third">
+    <div class="grid-row">
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/form-elements/">Form elements</a></h2>
-      <p>
-        Form fields, labels, focus states, radio buttons, checkboxes.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/form-elements/">Form elements</a></h2>
+        <p>
+          Form fields, labels, focus states, radio buttons, checkboxes.
+        </p>
 
-    </div>
-    <div class="column-third">
+      </div>
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/errors/">Errors and validation</a></h2>
-      <p>
-        Summary boxes, highlighting errors in forms.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/errors/">Errors and validation</a></h2>
+        <p>
+          Summary boxes, highlighting errors in forms.
+        </p>
 
-    </div>
-    <div class="column-third">
+      </div>
+      <div class="column-third">
 
-      <h2 class="heading-medium"><a href="{{site.baseurl}}/alpha-beta-banners/">Alpha and beta banners</a></h2>
-      <p>
-        How to create alpha and beta banners using the front-end toolkit.
-      </p>
+        <h2 class="heading-medium"><a href="{{site.baseurl}}/alpha-beta-banners/">Alpha and beta banners</a></h2>
+        <p>
+          How to create alpha and beta banners using the front-end toolkit.
+        </p>
 
+      </div>
     </div>
-  </div>
 
-  <div class="grid-row divider">
-    <div class="column-two-thirds">
+    <div class="grid-row divider">
+      <div class="column-two-thirds">
 
-      <h3 class="heading-small">Looking for the styles?</h3>
-      <p>
-         The Sass files for <a href="https://github.com/alphagov/govuk_elements/tree/master/public/sass" rel="external">all the examples can be found on GitHub</a>.
-      </p>
+        <h3 class="heading-small">Looking for the styles?</h3>
+        <p>
+           The Sass files for <a href="https://github.com/alphagov/govuk_elements/tree/master/public/sass" rel="external">all the examples can be found on GitHub</a>.
+        </p>
 
-      <h3 class="heading-small">Want to discuss these patterns?</h3>
-      <p>
-        <a href="https://designpatterns.hackpad.com/" rel="external">Discuss design patterns for GOV.UK services on our hackpad</a>.
-      </p>
+        <h3 class="heading-small">Want to discuss these patterns?</h3>
+        <p>
+          <a href="https://designpatterns.hackpad.com/" rel="external">Discuss design patterns for GOV.UK services on our hackpad</a>.
+        </p>
 
+      </div>
     </div>
-  </div>
 
+  </div><!-- /.text -->
 </main><!-- / #content -->
 {{/content}}