diff --git a/app/views/guide_typography.html b/app/views/guide_typography.html
index c285561b1..3ecf751f1 100755
--- a/app/views/guide_typography.html
+++ b/app/views/guide_typography.html
@@ -115,31 +115,45 @@ <h3 class="heading-medium" id="typography-body-copy">
 
   <h3 class="heading-medium" id="typography-links">Links</h3>
 
-  <p class="notice">
-    <i class="icon icon-important">
-      <span class="visuallyhidden">Warning</span>
-    </i>
-    <strong class="bold-small">
-      External link styles are deprecated and are liable to be removed in a future release. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, <a href="https://groups.google.com/a/digital.cabinet-office.gov.uk/forum/#!forum/digital-service-designers">digital-service-designers</a> or <a href="https://github.com/alphagov/govuk_elements/issues/new">opening an issue</a>.
-    </strong>
-  </p>
-
   <ul class="list list-bullet text">
     <li>links within body copy should be blue and underlined</li>
     <li>links without surrounding text should not have a full stop at the end</li>
     <li>link colours can be found in the <a href="/colour">colour palette</a></li>
   </ul>
 
-<div class="example">
-  <div class="text">
-    {% include "snippets/typography_links.html" %}
+  <div class="example">
+    <div class="text">
+      {% include "snippets/typography_links.html" %}
+    </div>
   </div>
-</div>
 
 <pre>
 <code class="language-markup">
   {% include "snippets/encoded/typography_links.html" %}
 </code>
+</pre>
+
+  <h4 class="heading-medium" id="typography-external-links">External links</h4>
+
+  <div class="panel panel-border-wide text">
+    <p>
+      <strong class="bold-small">External link styles are deprecated and are liable to be removed in a future release.</strong>
+    </p>
+    <p>
+      If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, <a href="https://groups.google.com/a/digital.cabinet-office.gov.uk/forum/#!forum/digital-service-designers">digital-service-designers</a> or <a href="https://github.com/alphagov/govuk_elements/issues/new">opening an issue</a>.
+    </p>
+  </div>
+
+  <div class="example">
+    <div class="text">
+      {% include "snippets/typography_external_links.html" %}
+    </div>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/encoded/typography_external_links.html" %}
+</code>
 </pre>
 
   <h3 class="heading-medium" id="typography-lists">Lists</h3>
diff --git a/app/views/snippets/typography_external_links.html b/app/views/snippets/typography_external_links.html
new file mode 100644
index 000000000..d085cbebe
--- /dev/null
+++ b/app/views/snippets/typography_external_links.html
@@ -0,0 +1,3 @@
+<p>
+  <a href="#" rel="external">A 19px body copy external link.</a> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+</p>
diff --git a/app/views/snippets/typography_links.html b/app/views/snippets/typography_links.html
index 8d1425472..2315acd86 100644
--- a/app/views/snippets/typography_links.html
+++ b/app/views/snippets/typography_links.html
@@ -6,9 +6,4 @@
   <a href="#">A 19px body copy link</a>. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
 </p>
 
-<p>
-  <a href="#" rel="external">A 19px body copy external link.</a> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-</p>
-
-
-<a href="#" class="link-back">Back</a>
\ No newline at end of file
+<a href="#" class="link-back">Back</a>