From fb157b9b1a16c5781bf78a6e7755245e5f63f5fc Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 14 Nov 2016 18:04:14 +0000
Subject: [PATCH 1/3] Create two snippets for the 80px data examples

---
 app/views/snippets/data_80px_16px.html         | 4 ++++
 app/views/snippets/data_80px_16px_example.html | 4 ++++
 2 files changed, 8 insertions(+)
 create mode 100644 app/views/snippets/data_80px_16px.html
 create mode 100644 app/views/snippets/data_80px_16px_example.html

diff --git a/app/views/snippets/data_80px_16px.html b/app/views/snippets/data_80px_16px.html
new file mode 100644
index 000000000..34f65a7d7
--- /dev/null
+++ b/app/views/snippets/data_80px_16px.html
@@ -0,0 +1,4 @@
+<div class="data">
+  <h2 class="bold-xxlarge">80px</h2>
+  <p class="bold-xsmall">16px</p>
+</div>
diff --git a/app/views/snippets/data_80px_16px_example.html b/app/views/snippets/data_80px_16px_example.html
new file mode 100644
index 000000000..5711a459d
--- /dev/null
+++ b/app/views/snippets/data_80px_16px_example.html
@@ -0,0 +1,4 @@
+<div class="data">
+  <h2 class="bold-xxlarge">24</h2>
+  <p class="bold-xsmall">Ministerial departments</p>
+</div>

From 106a07a43ab232d556387f362a310f8cd521d70d Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 14 Nov 2016 18:04:33 +0000
Subject: [PATCH 2/3] Create two snippets for the 48px data examples

---
 app/views/snippets/data_48px_16px.html         | 4 ++++
 app/views/snippets/data_48px_16px_example.html | 4 ++++
 2 files changed, 8 insertions(+)
 create mode 100644 app/views/snippets/data_48px_16px.html
 create mode 100644 app/views/snippets/data_48px_16px_example.html

diff --git a/app/views/snippets/data_48px_16px.html b/app/views/snippets/data_48px_16px.html
new file mode 100644
index 000000000..6e18f9e8e
--- /dev/null
+++ b/app/views/snippets/data_48px_16px.html
@@ -0,0 +1,4 @@
+<div class="data">
+  <h2 class="bold-xlarge">48px</h2>
+  <p class="bold-xsmall">16px</p>
+</div>
diff --git a/app/views/snippets/data_48px_16px_example.html b/app/views/snippets/data_48px_16px_example.html
new file mode 100644
index 000000000..a04d7bffd
--- /dev/null
+++ b/app/views/snippets/data_48px_16px_example.html
@@ -0,0 +1,4 @@
+<div class="data">
+  <h2 class="bold-xlarge">56/154</h2>
+  <p class="bold-xsmall">on GOV.UK</p>
+</div>

From 4f1286ad9d006fbd35f9776851909072153c4011 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 14 Nov 2016 18:04:45 +0000
Subject: [PATCH 3/3] Use the new snippets for the data examples

---
 app/views/guide_data.html | 40 ++++++++++++++++-----------------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/app/views/guide_data.html b/app/views/guide_data.html
index e3336eac3..b655e86e9 100755
--- a/app/views/guide_data.html
+++ b/app/views/guide_data.html
@@ -75,45 +75,37 @@ <h3 class="heading-medium" id="data-visualisation">Data visualisation</h3>
   <div class="example">
     <div class="grid-row">
       <div class="column-one-half">
-
-        <div class="data">
-          <h2 class="bold-xxlarge">24</h2>
-          <p class="bold-xsmall">Ministerial departments</p>
-        </div>
-
+        {% include "snippets/data_80px_16px_example.html" %}
       </div>
       <div class="column-one-half">
-
-        <div class="data">
-          <h2 class="bold-xxlarge">80px</h2>
-          <p class="bold-xsmall">16px</p>
-        </div>
-
+        {% include "snippets/data_80px_16px.html" %}
       </div>
     </div>
   </div>
 
+<pre>
+<code class="language-markup">
+  {% include "snippets/encoded/data_80px_16px_example.html" %}
+</code>
+</pre>
+
   <div class="example">
     <div class="grid-row">
       <div class="column-one-half">
-
-        <div class="data">
-          <h2 class="bold-xlarge">56/154</h2>
-          <p class="bold-xsmall">on GOV.UK</p>
-        </div>
-
+        {% include "snippets/data_48px_16px_example.html" %}
       </div>
       <div class="column-one-half">
-
-        <div class="data">
-          <h2 class="bold-xlarge">48px</h2>
-          <p class="bold-xsmall">16px</p>
-        </div>
-
+        {% include "snippets/data_48px_16px.html" %}
       </div>
     </div>
   </div>
 
+<pre>
+<code class="language-markup">
+  {% include "snippets/encoded/data_48px_16px_example.html" %}
+</code>
+</pre>
+
   <h3 class="heading-medium" id="examples">Examples</h3>
   <ul class="list list-bullet">
     <li>