diff --git a/docs/_includes/components/image-with-caption.html b/docs/_includes/components/image-with-caption.html
index f511d0c..58703cd 100644
--- a/docs/_includes/components/image-with-caption.html
+++ b/docs/_includes/components/image-with-caption.html
@@ -1,4 +1,4 @@
-<figure class="nhsuk-image-with-caption {{ include.class | xml_escape }}">
+<figure class="nhsuk-image-with-caption {{ include.classes | xml_escape }}">
   {% assign src = '/assets/images/' | prepend: site.baseurl | append: include.src %}
   {% if include.src contains 'https://' %}
   <img class="nhsuk-image__img" src='{{ include.src | uri_escape }}' alt='{{ include.alt | xml_escape }}' />
diff --git a/docs/_includes/components/image.html b/docs/_includes/components/image.html
index cb40061..d81efc7 100644
--- a/docs/_includes/components/image.html
+++ b/docs/_includes/components/image.html
@@ -1,4 +1,4 @@
-<figure class="nhsuk-image {{ include.class | xml_escape }}">
+<figure class="nhsuk-image {{ include.classes | xml_escape }}">
   {% assign src = '/assets/images/' | prepend: site.baseurl | append: include.src %}
   {% if include.src contains 'https://' %}
   <img class="nhsuk-image__img" src='{{ include.src | uri_escape }}' alt='{{ include.alt | xml_escape }}' />
diff --git a/docs/_includes/components/inset-text.html b/docs/_includes/components/inset-text.html
index 415aff3..cf56221 100644
--- a/docs/_includes/components/inset-text.html
+++ b/docs/_includes/components/inset-text.html
@@ -1,4 +1,4 @@
-<div class="nhsuk-inset-text">
+<div class="nhsuk-inset-text {{ include.classes | xml_escape }}">
   <span class="nhsuk-u-visually-hidden">Information:</span>
   {{ include.text | markdownify }}
 </div>
diff --git a/docs/pages/index.md b/docs/pages/index.md
index f808a50..a03a9db 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -22,7 +22,7 @@ permalink: /
         %}
       </div>
       <div class="nhsuk-grid-column-one-half">
-        {% include components/image.html src=site.data.home.heading.image alt=site.data.home.heading.image_alt class="nhsnotify-image" %}
+        {% include components/image.html src=site.data.home.heading.image alt=site.data.home.heading.image_alt classes="nhsnotify-image" %}
       </div>
     </div>
   </div>
@@ -89,7 +89,7 @@ permalink: /
         %}
       </div>
       <div class="nhsuk-grid-column-one-half">
-        {% include components/image.html src=site.data.home.find-out-more.image alt=site.data.home.find-out-more.image_alt class="nhsnotify-image" %}
+        {% include components/image.html src=site.data.home.find-out-more.image alt=site.data.home.find-out-more.image_alt classes="nhsnotify-image" %}
       </div>
     </div>
   </div>
diff --git a/docs/pages/using-nhs-notify/personalisation.md b/docs/pages/using-nhs-notify/personalisation.md
index 3cec8ec..aef5b79 100644
--- a/docs/pages/using-nhs-notify/personalisation.md
+++ b/docs/pages/using-nhs-notify/personalisation.md
@@ -17,7 +17,8 @@ You can send personalised messages by adding personalisation fields to a single
 Use double brackets to add a personalisation field to your template. Do not include spaces in your personalisation fields. For example:
 
 {% include components/inset-text.html
-    text='`Hello ((fullName)), your NHS Number is ((nhsNumber)). Your appointment is on ((appointmentDate)) at ((gpSurgery)).`'
+text='Hello `((fullName))`, your NHS Number is `((nhsNumber))`. Your appointment is on `((appointmentDate))` at `((gpSurgery))`.'
+classes='nhsuk-u-margin-top-2'
 %}
 
 You can read personalisation instructions while you’re editing a template.
@@ -37,7 +38,8 @@ You can use the following PDS fields:
 - date
 
 {% include components/inset-text.html
-    text='Make sure your personalisation fields match the PDS personalisation fields. This includes using the correct order of upper and lower case letters.'
+text='Make sure your personalisation fields match the PDS personalisation fields. This includes using the correct order of upper and lower case letters.'
+classes='nhsuk-u-margin-top-2'
 %}
 
 ## Custom personalisation fields (your data)
@@ -94,7 +96,9 @@ text='
 
 - New Surgery (short)
 - The Health Centre, Knaresborough Road (medium)
-- Church Avenue and Park Grove Medical Group Surgery (long)'
+- Church Avenue and Park Grove Medical Group Surgery (long)
+  '
+  classes='nhsuk-u-margin-top-2'
   %}
 
 Follow these rules for your example data:
@@ -109,7 +113,8 @@ Follow these rules for your example data:
 To add personalised links and URLs, include personalisation fields for both the link text and the URL in your template. For example:
 
 {% include components/inset-text.html
-    text='`[((link_text))](((link_URL)))`'
+text='`[((link_text))](((link_URL)))`'
+classes='nhsuk-u-margin-top-2'
 %}
 
 ### Fields to avoid for custom personalisation
@@ -129,11 +134,13 @@ If you use custom personalisation, do not use the following personalisation fiel
 - template
 
 {% include components/inset-text.html
-    text='Using these fields will cause custom personalisation to fail. This includes any variations, for example, if you add spaces, punctuation, and upper or lower case letters.'
+text='Using these fields will cause custom personalisation to fail. This includes any variations, for example, if you add spaces, punctuation, and upper or lower case letters.'
+classes='nhsuk-u-margin-top-2'
 %}
 
 You can include extra words in your custom personalisation fields to make them different to the fields to avoid. For example, if you wanted to include GP surgery phone number, your personalisation field could be:
 
 {% include components/inset-text.html
-    text='`((GP_phoneNumber))`'
+text='`((GP_phoneNumber))`'
+classes='nhsuk-u-margin-top-2'
 %}