diff --git a/app/assets/stylesheets/govuk-component/_govspeak-print.scss b/app/assets/stylesheets/govuk-component/_govspeak-print.scss
index 9233821f8..37603353c 100644
--- a/app/assets/stylesheets/govuk-component/_govspeak-print.scss
+++ b/app/assets/stylesheets/govuk-component/_govspeak-print.scss
@@ -2,4 +2,33 @@
   .play-container {
     display: none;
   }
+
+  .attachment {
+    margin: $gutter 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .attachment-thumb {
+      display: none;
+    }
+
+    .attachment-details {
+      .download {
+        display: block;
+      }
+    }
+
+    .accessibility-warning {
+      h2 {
+        @include core-14;
+      }
+
+      .toggler {
+        display: none;
+      }
+    }
+  }
+
 }
diff --git a/app/assets/stylesheets/govuk-component/_govspeak.scss b/app/assets/stylesheets/govuk-component/_govspeak.scss
index f9a5af736..cad442391 100644
--- a/app/assets/stylesheets/govuk-component/_govspeak.scss
+++ b/app/assets/stylesheets/govuk-component/_govspeak.scss
@@ -33,19 +33,6 @@
   h3 {
     @include bold-19;
     margin-top: $gutter + 5px;
-
-    &.hosted-externally {
-      @include bold-27;
-      padding-top: 2px;
-
-      a {
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
   }
 
   h4 {
@@ -413,4 +400,103 @@
   .media-player {
     @include media-player;
   }
+
+  // This block is duplicated from Whitehall as a transitional step, see the
+  // commit adding this warning before making changes, original version:
+  // https://github.com/alphagov/whitehall/blob/master/app/assets/stylesheets/frontend/helpers/_attachment.scss
+  $thumbnail-width: 99px;
+
+  .attachment {
+    position: relative;
+    margin: $gutter 0;
+    padding: $gutter-half 0 0 ($thumbnail-width + $gutter);
+    @extend %contain-floats;
+
+    &:first-child {
+      margin-top: 0;
+      padding-top: 0;
+    }
+
+    .attachment-thumb {
+      $thumb-border-width: $gutter-one-third / 2;
+
+      position: relative;
+      float: left;
+      margin-top: $thumb-border-width;
+      margin-left: -($thumbnail-width + $gutter - $thumb-border-width);
+      padding-bottom: $gutter-half;
+
+      img {
+        display: block;
+        width: $thumbnail-width;
+        height: 140px;
+        background: $white;
+        outline: $thumb-border-width solid transparentize($black, 0.9);
+
+        @include ie-lte(8) {
+          border: $thumb-border-width solid $grey-3;
+        }
+
+        @include box-shadow(0 2px 2px rgba($black, .4));
+      }
+    }
+
+    .attachment-details {
+      h2 {
+        @include core-27;
+        margin: 0;
+      }
+
+      p {
+        margin: $gutter-one-third 0;
+      }
+
+      .metadata {
+        @include core-14;
+      }
+
+      .changed,
+      .references,
+      .unnumbered-paper {
+        display: block;
+      }
+
+      .preview,
+      .download {
+        @include core-19;
+
+        strong {
+          font-weight: bold;
+        }
+      }
+
+      .preview {
+        padding-right: $gutter-half;
+      }
+
+      .opendocument-help {
+        @include core-14;
+        a {
+          @include external-link-14;
+        }
+      }
+
+      .accessibility-warning {
+        h2 {
+          @include core-14;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  &.direction-rtl .attachment {
+    padding: $gutter-half ($thumbnail-width + $gutter) 0 0;
+
+    .attachment-thumb {
+      float: right;
+      margin-left: 0;
+      margin-right: (($thumbnail-width * -1) - $gutter-half);
+    }
+  }
 }
diff --git a/app/views/govuk_component/docs/govspeak.yml b/app/views/govuk_component/docs/govspeak.yml
index 59ac3b1de..e21e6f7dd 100644
--- a/app/views/govuk_component/docs/govspeak.yml
+++ b/app/views/govuk_component/docs/govspeak.yml
@@ -241,3 +241,173 @@ fixtures:
           </li>
         </ol>
       </div>
+  inline_attachment:
+    content: |
+      <p>testing my attachment <span class="inline-attachment" id="attachment_1399340">
+        <a href="/government/uploads/system/uploads/attachment_data/file/498071/PHE_Payments_over__25k_Jun_15.csv">testing</a>
+        (<span class="type"><abbr title="Comma-separated Values">CSV</abbr></span>, <span class="file-size">65.4KB</span>)</span> works in the middle of copy.
+      </p>
+  block_attachments:
+    content: |
+      <section class="attachment embedded" id="attachment_1399345">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/minimum-wage-jobs-in-ashfield-local-authority-since-2009"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/496127/thumbnail_LPC_FoI_09.12.15_NMW_jobs_Ashfield_LA.pdf.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a href="https://www.gov.uk/government/publications/minimum-wage-jobs-in-ashfield-local-authority-since-2009">PDF Attachment</a></h2>
+          <p class="metadata">
+            <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">198KB</span>, <span class="page-length">2 pages</span>
+          </p>
+        </div>
+      </section>
+      <section class="attachment embedded" id="attachment_1399344">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/world-location-news/294043.es-419"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-doc-afe3b0a8a9511beeca890340170aee8b5649413f948e512c9b8ce432d8513d32.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a href="https://www.gov.uk/government/world-location-news/294043.es-419">Document attachment</a></h2>
+          <p class="metadata">
+            <span class="type">MS Word Document</span>, <span class="file-size">24.2KB</span>
+          </p>
+        </div>
+      </section>
+      <section class="attachment embedded" id="attachment_1105176">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/post-legislative-memorandum-the-equality-act-2010"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/441838/thumbnail_Memo_to_Women_Equalities.pdf.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a href="https://www.gov.uk/government/publications/post-legislative-memorandum-the-equality-act-2010">File attachment with additional metadata</a></h2>
+          <p class="metadata">
+            <span class="references">
+            Ref: ISBN <span class="isbn">9781474121767</span>, <span class="command_paper_number">CM 9101</span>
+            </span>
+            <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">2.02MB</span>, <span class="page-length">86 pages</span>
+          </p>
+          <p>
+            <a class="order_url" title="Order a copy of the publication" href="https://www.gov.uk/how-to-buy-printed-copies-of-official-documents%20">Order a copy</a>
+          </p>
+        </div>
+      </section>
+      <section class="attachment embedded" id="attachment_1399348">
+        <div class="attachment-thumb">
+          <img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png">
+        </div>
+        <div class="attachment-details">
+          <h2 class="title">Previewable online example</h2>
+          <p class="metadata">
+            <span class="preview">
+            <strong>
+            <a href="https://www.gov.uk/government/publications/phe-spend-over-25000-june-2015">View online</a>
+            </strong>
+            </span>
+            <span class="download">
+            <a href="https://www.gov.uk/government/publications/phe-spend-over-25000-june-2015">
+            <strong>Download CSV</strong>
+            65.4KB
+            </a>
+            </span>
+          </p>
+        </div>
+      </section>
+      <section class="attachment embedded" id="attachment_1243761">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a aria-describedby="attachment-1243761-accessibility-help" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england">Fly-tipping incidents and actions reported by local authorities in 2014 to 2015</a></h2>
+          <p class="metadata">
+            <span class="type"><abbr title="OpenDocument Spreadsheet">ODS</abbr></span>, <span class="file-size">173KB</span>
+          </p>
+          <p class="opendocument-help">
+            This file is in an <a rel="external" href="https://en.wikipedia.org/wiki/OpenDocument_software">OpenDocument</a> format
+          </p>
+          <div data-module="toggle" class="accessibility-warning" id="attachment-1243761-accessibility-help">
+            <h2>This file may not be suitable for users of assistive technology.
+              <a class="toggler" href="#attachment-1243761-accessibility-request" data-controls="attachment-1243761-accessibility-request" data-expanded="false">Request a different format.</a>
+            </h2>
+            <p id="attachment-1243761-accessibility-request" class="help-block js-hidden"><span class="arrow"></span>
+              If you use assistive technology and need a version of this document
+              in a more accessible format, please email
+              <a href="mailto:defra.helpline@defra.gsi.gov.uk?body=Details%20of%20document%20required%3A%0A%0A%20%20Title%3A%20Fly-tipping%20incidents%20and%20actions%20reported%20by%20local%20authorities%20in%202014%20to%202015%0A%20%20Original%20format%3A%20ods%0A%0APlease%20tell%20us%3A%0A%0A%20%201.%20What%20makes%20this%20format%20unsuitable%20for%20you%3F%0A%20%202.%20What%20format%20you%20would%20prefer%3F%0A%20%20%20%20%20%20&amp;subject=Request%20for%20%27Fly-tipping%20incidents%20and%20actions%20reported%20by%20local%20authorities%20in%202014%20to%202015%27%20in%20an%20alternative%20format">defra.helpline@defra.gsi.gov.uk</a>.
+              Please tell us what format you need. It will help us if you say what assistive technology you use.
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="attachment embedded" id="attachment_1112527">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-html-b0465911e56983d98c70f0e25fba24bc206d37e8c83d4addf6421dcf6022c6cd.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015">Summer Budget 2015</a></h2>
+          <p class="metadata">
+            <span class="type">HTML</span>
+          </p>
+        </div>
+      </section>
+      <section class="attachment hosted-externally" id="attachment_1425055">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//whitehall-admin.integration.publishing.service.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a rel="external" href="http://example.com">An external link</a></h2>
+          <p class="metadata">
+            <span class="url">http://example.com</span>
+          </p>
+        </div>
+      </section>
+      <section class="attachment hosted-externally" id="attachment_1425056">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//whitehall-admin.integration.publishing.service.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a rel="external" href="http://example.com">An external link (with all possible metadata)</a></h2>
+          <p class="metadata">
+            <span class="references">
+            Ref: ISBN <span class="isbn">9780605039070</span>, <span class="unique_reference">ABC-12345</span>, <span class="command_paper_number">Cmd.987654321</span>, <span class="house_of_commons_paper_number">HC 0123456789</span> <span class="parliamentary_session">2015-16</span>
+            </span>
+            <span class="url">http://example.com</span>
+          </p>
+          <p>
+            <a class="order_url" title="Order a copy of the publication" href="http://www.example.com">Order a copy</a>
+            (<span class="price">£1.00</span>)
+          </p>
+        </div>
+      </section>
+      <section class="attachment embedded" id="attachment_1398523">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/498443/thumbnail_petrol-vapour-recovery-consult-sum-resp.pdf.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations">Consultation outcome with published date</a></h2>
+          <p class="metadata">
+            <span class="changed">Published: <time class="date" datetime="2016-02-08"> 8 February 2016</time></span>
+            <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">106KB</span>, <span class="page-length">7 pages</span>
+          </p>
+        </div>
+      </section>
+  block_attachment_rtl:
+    direction: rtl
+    content: |
+      <section class="attachment embedded" id="attachment_514218">
+        <div class="attachment-thumb">
+          <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/future-of-food-and-farming.ar"><img alt="" src="https://assets-origin.integration.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/288236/thumbnail_11-924-future-of-food-and-farming-summary-arabic.pdf.png"></a>
+        </div>
+        <div class="attachment-details">
+          <h2 class="title"><a aria-describedby="attachment-514218-accessibility-help" href="https://www.gov.uk/government/publications/future-of-food-and-farming.ar">مستقبل الغذاء والزراعة: موجز تنفيذي</a></h2>
+          <p class="metadata">
+            <span class="references">
+            إشارة: <span class="unique_reference">BIS/11/924</span>
+            </span>
+            <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">906KB</span>, <span class="page-length">44 pages</span>
+          </p>
+          <div data-module="toggle" class="accessibility-warning" id="attachment-514218-accessibility-help">
+            <h2>هذا المف قد لا يكون مناسبا لمستخدمي التكنولوجيا المساعدة على القراءة
+              <a class="toggler" href="#attachment-514218-accessibility-request" data-controls="attachment-514218-accessibility-request" data-expanded="false" role="button" aria-controls="attachment-514218-accessibility-request" aria-expanded="false">طلب الوثيقة بشكل آخر</a>
+            </h2>
+            <p id="attachment-514218-accessibility-request" class="js-hidden" aria-live="polite" role="region">
+              لاستلام وثيقة مكتوبة بشكل آخر، كلغة بريل أو وثيقة صوتية أو أي نوع آخر من الوثائق، يرجى إرسال رسالة إلكترونية إلى <a href="mailto:enquiries@bis.gsi.gov.uk?body=Details%20of%20document%20required%3A%0A%0A%20%20Title%3A%20%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%20%D8%A7%D9%84%D8%BA%D8%B0%D8%A7%D8%A1%20%D9%88%D8%A7%D9%84%D8%B2%D8%B1%D8%A7%D8%B9%D8%A9%3A%20%D9%85%D9%88%D8%AC%D8%B2%20%D8%AA%D9%86%D9%81%D9%8A%D8%B0%D9%8A%0A%20%20Original%20format%3A%20pdf%0A%20%20Unique%20reference%3A%20BIS%2F11%2F924%0A%0APlease%20tell%20us%3A%0A%0A%20%201.%20What%20makes%20this%20format%20unsuitable%20for%20you%3F%0A%20%202.%20What%20format%20you%20would%20prefer%3F%0A%20%20%20%20%20%20&amp;subject=Request%20for%20%27%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%20%D8%A7%D9%84%D8%BA%D8%B0%D8%A7%D8%A1%20%D9%88%D8%A7%D9%84%D8%B2%D8%B1%D8%A7%D8%B9%D8%A9%3A%20%D9%85%D9%88%D8%AC%D8%B2%20%D8%AA%D9%86%D9%81%D9%8A%D8%B0%D9%8A%27%20in%20an%20alternative%20format">enquiries@bis.gsi.gov.uk</a> مع كتابة عنوانك ورقم هاتفك إلى جانب عنوان الوثيقة المطلوبة ("{title}"), and its reference (Unique reference: BIS/11/924)
+            </p>
+          </div>
+        </div>
+      </section>