From adf1493fb528d08e835cde0c6eb1af70a6d87b6d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 28 Jun 2018 16:06:04 +0100
Subject: [PATCH] Add guidance about horizontal lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../templates/guidance-formatting.html        | 26 ++++++++++++++-----
 .../partials/templates/guidance-links.html    |  2 +-
 .../templates/guidance-optional-content.html  |  2 +-
 .../templates/guidance-personalisation.html   |  2 +-
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/templates/partials/templates/guidance-formatting.html b/app/templates/partials/templates/guidance-formatting.html
index c17fbb452..1bfa35150 100644
--- a/app/templates/partials/templates/guidance-formatting.html
+++ b/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>
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index 34ff7cf82..70c78d852 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/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">
diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html
index 0d8b19ca6..7303ee7a9 100644
--- a/app/templates/partials/templates/guidance-optional-content.html
+++ b/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>
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
index bc3c44d91..247792d22 100644
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ b/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">