Merge pull request #932 from alphagov/add-examples-captions-inside-ou…

…tside-headings Add example of captions before and inside headings
alphagov · Jul 30, 2018 · d340ee8 · d340ee8
2 parents b40ca0f + d47928d
commit d340ee8
Showing 1 changed file with 17 additions and 1 deletion.
diff --git 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>