Merge pull request #408 from alphagov/adjacent-list-spacing

Add adjecent styles for headings after lists
alphagov · Jan 5, 2018 · de0b82d · de0b82d
2 parents eeadbe9 + a023e04
commit de0b82d
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 2 deletions.
diff --git a/src/globals/scss/core/_typography.scss b/src/globals/scss/core/_typography.scss
@@ -139,14 +139,17 @@
   }
 
   .govuk-body-m  + .govuk-heading-l,
-  .govuk-body-s  + .govuk-heading-l {
+  .govuk-body-s  + .govuk-heading-l,
+  .govuk-list + .govuk-heading-l {
     @include govuk-responsive-padding($govuk-spacing-responsive-4, "top");
   }
 
   .govuk-body-m + .govuk-heading-m,
   .govuk-body-s + .govuk-heading-m,
+  .govuk-list + .govuk-heading-m,
   .govuk-body-m + .govuk-heading-s,
-  .govuk-body-s + .govuk-heading-s {
+  .govuk-body-s + .govuk-heading-s,
+  .govuk-list + .govuk-heading-s {
     padding-top: $govuk-spacing-scale-1;
 
     @include mq($from: tablet) {

diff --git a/src/views/examples/typography/index.njk b/src/views/examples/typography/index.njk
@@ -269,6 +269,84 @@
 
       <p class="govuk-body-m">You’ll receive your badge within 4 weeks or you’ll be contacted if you need to provide more information.</p>
     </section>
+
+    <section class="govuk-!-mt-r8">
+      <h2 class="govuk-heading-l govuk-!-pb-r2" style="border-bottom: 4px solid;">Adjacent siblings</h2>
+
+      <p class="govuk-body-l">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>
+
+      <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>
+
+      <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>
+
+      <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>
+
+      <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>
+
+      <h3 class="govuk-heading-m">govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m</h3>
+
+      <p class="govuk-body">govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body govuk-body </p>
+
+      <h4 class="govuk-heading-s">govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s</h4>
+
+      <ul class="govuk-list govuk-list--bullet">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ul>
+
+      <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>
+
+      <ul class="govuk-list govuk-list--bullet">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ul>
+
+      <h3 class="govuk-heading-m">govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m</h3>
+
+      <ul class="govuk-list govuk-list--bullet">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ul>
+
+      <h4 class="govuk-heading-s">govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s</h4>
+
+
+      <ol class="govuk-list govuk-list--number">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ol>
+
+      <h2 class="govuk-heading-l">govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l govuk-heading-l</h2>
+
+      <ol class="govuk-list govuk-list--number">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ol>
+
+      <h3 class="govuk-heading-m">govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m govuk-heading-m</h3>
+
+      <ol class="govuk-list govuk-list--number">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ol>
+
+      <h4 class="govuk-heading-s">govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s govuk-heading-s</h4>
+
+    </section>
+
+
   </div>
 </div>