Add Gwen’s initial guidance about formatting

This is based on some work Gwen did for Civil Service Digital. Let’s
get it in for now so that we have a starting point from which to
improve.

This specifically doesn’t reference ‘optional’ placeholders because I
don’t know how best to explain those yet.

app/templates/partials/templates/guidance-formatting.html

@@ -0,0 +1,27 @@
+<h2 class="heading-medium">Formatting</h2>
+<p>
+  To put a title in your template, use a hash:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    # This is a title
+  </p>
+</div>
+<p>
+  To make bullet points, use asterisks:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    * point 1<br/>
+    * point 2<br/>
+    * point 3<br/>
+  </p>
+</div>
+<p>
+  To add a callout, use a caret:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    ^ You must tell us if your circumstances change
+  </p>
+</div>

app/templates/partials/templates/guidance-links.html

@@ -2,3 +2,8 @@
 <p>
   Always use full URLs, starting with https://
 </p>
+<div class="panel panel-border-wide">
+  <p>
+    Apply now at https://www.gov.uk/example
+  </p>
+</div>

app/templates/partials/templates/guidance-personalisation.html

@@ -2,11 +2,10 @@
   Personalisation
 </h2>
 <p>
-  Use double brackets to add personalisation.
-</p>
-<p>
-  Correct: ((name))
-</p>
-<p>
-  Incorrect: ((Helen))
+  Use double brackets to personalise your message:
 </p>
+<div class="panel panel-border-wide">
+  <p>
+    Hello ((first name)), your reference is ((ref number))
+  </p>
+</div>