From d47928dd91ae4558bca1472c525a151b9cdf302b Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 30 Jul 2018 14:07:45 +0100
Subject: [PATCH] Add example of captions before and inside headings

---
 app/views/examples/typography/index.njk | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/views/examples/typography/index.njk b/app/views/examples/typography/index.njk
index 20631f3b1b..1be0da3c44 100644
--- a/app/views/examples/typography/index.njk
+++ b/app/views/examples/typography/index.njk
@@ -40,7 +40,23 @@
       <!-- Headings with captions -->
 
       <section class="govuk-!-margin-top-8">
-        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Headings with captions</h2>
+        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Captions before headings</h2>
+        <div>
+          <span class="govuk-caption-xl">govuk-caption-xl</span>
+          <h1 class="govuk-heading-xl">govuk-heading-xl</h1>
+        </div>
+        <div>
+          <span class="govuk-caption-l">govuk-caption-l</span>
+          <h2 class="govuk-heading-l">govuk-heading-l</h2>
+        </div>
+        <div>
+          <span class="govuk-caption-m">govuk-caption-m</span>
+          <h3 class="govuk-heading-m">govuk-heading-m</h3>
+        </div>
+      </section>
+
+      <section class="govuk-!-margin-top-8">
+        <h2 class="govuk-heading-l govuk-!-padding-bottom-2" style="border-bottom: 4px solid;">Captions inside headings</h2>
         <div>
           <h1 class="govuk-heading-xl">
             <span class="govuk-caption-xl">govuk-caption-xl</span>