interruption card template

...idea for 'gate pages' based on alphagov/govuk-design-system-backlog#27

app/assets/sass/application.scss

@@ -136,12 +136,39 @@ $govuk-assets-path: '/govuk/assets/';
     line-height: 1.31579;
 }
 
-
-
 .govuk-panel-lft-result {
   background: #0065bb !important;
 }
 
+.govuk-panel-card {
+  background: #0065bb !important;
+  text-align: left !important;
+}
+
+.govuk-panel-card-body {
+
+}
+
+.govuk-panel-card  p, .govuk-panel-card  li, .govuk-panel-card  a {
+  color: #fff !important;
+}
+
+.govuk-panel-card  button {
+  background-color: #fff;
+  box-shadow: 0 2px 0 #000;
+  color: #0065bb !important;
+  font-weight: bold;
+}
+
+.govuk-panel-card  button:hover {
+  background-color: black;
+  color: white !important;
+}
+
+.govuk-panel-card  a:hover {
+  color: black !important;
+}
+
 
 .button-styled-link {
     cursor: pointer;

app/views/share-result-lateral-flow/v29/interuption-card.html

@@ -0,0 +1,62 @@
+{% set version = "v29" %}
+{% set pageTitle = "Most people in England can no longer get free COVID-19 tests" %}
+
+{% extends "includes/layout-LFD.html" %}
+
+{% block beforeContent %}
+  <div class="govuk-phase-banner">
+    <p class="govuk-phase-banner__content">
+      <strong class="govuk-tag govuk-phase-banner__content__tag">
+        alpha
+      </strong>
+      <span class="govuk-phase-banner__text">
+        This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
+      </span>
+    </p>
+  </div>
+
+  <!-- <a class="govuk-back-link" href="/share-result-lateral-flow/{{version}}/choose-result">Back</a> -->
+{% endblock %}
+
+{% block content %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+
+      <form action="https://www.gov.uk/get-coronavirus-test/" method="post">
+
+        <div class="govuk-panel govuk-panel--confirmation govuk-panel-card">
+         <h1 class="govuk-panel__title">
+           {{ pageTitle }}
+         </h1>
+         <div class="govuk-panel__body govuk-panel-card-body">
+           <p class="govuk-body">You may still be able to get free tests if:</p>
+           <ul class="govuk-list govuk-list--bullet">
+              <li>
+                  you're eligible for COVID-19 treatments
+              </li>
+              <li>
+                  you're being admitted into hospital
+              </li>
+              <li>
+                  you work in the NHS, or for an independent healthcare provider (IHP), or in adult social care
+              </li>
+              <li>
+                  your GP or healthcare professional has recently asked you to get a test
+              </li>
+          </ul>
+          <p class="govuk-body govuk-!-margin-bottom-6">
+            Find out  <a href="https://www.nhs.uk/conditions/coronavirus-covid-19/testing/get-tested-for-coronavirus/" class="govuk-link" target="_blank" rel="noopener noreferrer">who can get free tests (opens in new tab)</a>
+          </p>
+
+           <button class="govuk-button" data-module="govuk-button">Continue</button>
+         </div>
+       </div>
+
+      </form>
+
+    </div>
+  </div>
+
+
+{% endblock %}

app/views/share-result-lateral-flow/v29/positive-result-SR-england.html

@@ -5,36 +5,6 @@
 
 {% block beforeContent %}
 
-<!-- div for include from content folder -->
-<!-- <div id="includedContent1"></div> -->
-
-  <!-- <a class="govuk-back-link" href="/share-result-lateral-flow/{{version}}/choose-result">Back</a> -->
-<!-- {% endblock %}
-
-{% block content %}
-
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-
-      <form action="https://www.gov.uk/get-coronavirus-test/" method="post">
-
-         div for include from content folder -->
-         <!-- <div id="includedContent"></div>
-
-       </form>
-     </div>
-   </div> -->
-
-   <!-- corresponding html file name included from content folder -->
-   <!-- <script>
-     $(function(){
-       $("#includedContent").load("../content/positive-result-switch-omnicron.html");
-     });
-     $(function(){
-       $("#includedContent1").load("/includes/LFD-account-menu-end.html");
-     });
-   </script> -->
-
          <div class="govuk-panel govuk-panel--confirmation govuk-panel-lft-result">
             <h1 class="govuk-panel__title">
               {% if data['whos-taking-the-test'] == "someone-else" %}