Merge pull request #1002 from alphagov/tweak-address-styles

Style address blocks with margins
alphagov · Apr 19, 2017 · 2bda3f3 · 2bda3f3
2 parents 905cea7 + 468c3d4
commit 2bda3f3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/app/assets/stylesheets/govuk-component/govspeak/_contact.scss b/app/assets/stylesheets/govuk-component/govspeak/_contact.scss
@@ -6,18 +6,17 @@
 // - alphagov/govspeak: ✔︎
 
 .govuk-govspeak {
-  // No obvious signs of the address class being used in alphagov/whitehall or
-  // alphagov/govspeak.
+  // .address is used by the `$A` markdown pattern
   .address,
   .contact {
     border-left: 1px solid $border-colour;
     padding-left: $gutter-half;
+    margin-bottom: $gutter;
+    margin-top: $gutter;
   }
 
   .contact {
     @extend %contain-floats;
-    margin-bottom: $gutter;
-    margin-top: $gutter;
     position: relative;
 
     .content {

diff --git a/app/views/govuk_component/docs/govspeak.yml b/app/views/govuk_component/docs/govspeak.yml
@@ -152,6 +152,21 @@ fixtures:
           </tr>
         </tbody>
       </table>
+  address:
+    content: |
+      <div class="address">
+        <div class="adr org fn">
+          <p>
+            First line of address
+            <br>Second line of address
+            <br>75 This street
+            <br>United Kindom
+            <br>Phone: 07123456789
+            <br>
+          </p>
+        </div>
+      </div>
+      <p>Addresses are generated when using the `$A` markdown pattern.</p>
   contact:
     content: |
       <div class="contact" id="contact_1017">