Add guidance about horizontal lines

We’ve supported this for a while but don’t tell anyone how to do it.

This commit also alters the spacing of things so the description groups
better with the example.

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

@@ -1,27 +1,41 @@
 <h2 class="heading-medium">Formatting</h2>
-<p>
+<p class="bottom-gutter-1-3">
   To put a title in your template, use a hash:
 </p>
-<div class="panel panel-border-wide">
+<div class="panel panel-border-wide bottom-gutter">
   <p>
     # This is a title
   </p>
 </div>
-<p>
+<p class="bottom-gutter-1-3">
   To make bullet points, use asterisks:
 </p>
-<div class="panel panel-border-wide">
+<div class="panel panel-border-wide bottom-gutter">
   <p>
     * point 1<br/>
     * point 2<br/>
     * point 3<br/>
   </p>
 </div>
-<p>
+<p class="bottom-gutter-1-3">
   To add a callout, use a caret:
 </p>
-<div class="panel panel-border-wide">
+<div class="panel panel-border-wide bottom-gutter">
   <p>
     ^ You must tell us if your circumstances change
   </p>
 </div>
+<p class="bottom-gutter-1-3">
+  To add a horizontal line, use three dashes:
+</p>
+<div class="panel panel-border-wide">
+  <p>
+    First paragraph
+  </p>
+  <p style="letter-spacing: 1px;">
+    ---
+  </p>
+  <p>
+    Second paragraph
+  </p>
+</div>

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

@@ -1,5 +1,5 @@
 <h2 class="heading-medium">Links and URLs</h2>
-<p>
+<p class="bottom-gutter-1-3">
   Always use full URLs, starting with https://
 </p>
 <div class="panel panel-border-wide">

app/templates/partials/templates/guidance-optional-content.html

@@ -4,7 +4,7 @@
 <p>
   Use double brackets and ‘??’ to define optional content.
 </p>
-<p>
+<p class="bottom-gutter-1-3">
   For example if you only want to show something to people who are under
   18:
 </p>

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

@@ -1,7 +1,7 @@
 <h2 class="heading-medium">
   Personalisation
 </h2>
-<p>
+<p class="bottom-gutter-1-3">
   Use double brackets to personalise your message:
 </p>
 <div class="panel panel-border-wide">