Add deprecation message

README.md

@@ -1,3 +1,11 @@
+From the end of June 2018, GDS will stop maintaining the code and guidance in GOV.UK Elements.
+===============
+
+You will be able to get all of the GOV.UK styles, components and patterns in the GOV.UK Design System.
+
+GOV.UK Elements will still be available in case you are already using it, but GDS will only make serious bug fixes and security patches.
+
+
 GOV.UK elements ·
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![Greenkeeper badge](https://badges.greenkeeper.io/alphagov/govuk_elements.svg)](https://greenkeeper.io/)

app/views/includes/deprecation_message.html

@@ -0,0 +1,5 @@
+<div class="notification-summary">
+  <h2 class="heading-medium no-top-margin">From the end of June 2018, GDS will stop maintaining the code and guidance in GOV.UK Elements.</h2>
+  <p>You will be able to get all of the GOV.UK styles, components and patterns in the GOV.UK Design System.</p>
+  <p>GOV.UK Elements will still be available in case you are already using it, but GDS will only make serious bug fixes and security patches.</p>
+</div>

app/views/layout.html

@@ -14,6 +14,7 @@
 {% block content %}
 <div class="site-wrapper">
   {% include "includes/breadcrumb.html" %}
+  {% include "includes/deprecation_message.html" %}
   {% block main_content %}{% endblock %}
 </div>
 {% endblock %}

assets/sass/elements-documentation.scss

@@ -87,6 +87,25 @@ main > .heading-xlarge {
   margin-top: 0;
 }
 
+// deprecation notice
+.notification-summary {
+  border: 4px solid $govuk-blue;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding: $gutter-half 10px;
+
+  @include media(tablet) {
+    border: 5px solid $govuk-blue;
+
+    margin-top: $gutter;
+    margin-bottom: $gutter;
+
+    padding: $gutter-two-thirds $gutter-half $gutter-half;
+  }
+}
+
 // Example boxes
 // ==========================================================================