added help block to homepage

_prototypes/individual-response--your-household-v15/census-home-style.css

@@ -57,4 +57,8 @@
     background: #fff;
     border: 3px solid #fff;
     color: #3C388E;
+}
+
+.grid__col .card {
+    padding-right: 1rem;
 }

_prototypes/individual-response--your-household-v15/home.html

@@ -35,9 +35,9 @@ <h2 class="hero__subtitle u-fs-m">Ready to start your census online? <br>You’l
             <div class="panel panel--simple panel--warning js-panel-info" style=""><span class="panel__icon" aria-hidden="true">!</span><span class="panel__text">You must complete the census by law or you could be fined up to £1000.</span></div>
         </div>
     </section>
-    <section class="u-pt-l u-pb-s">
-        <div class="page__container container">
-            <div class="grid grid--column@xs@s u-mb-l">
+    <div class="page__container container">
+        <section class="u-pt-l u-mb-s u-bb u-pb-m">
+            <div class="grid grid--column@xs@s">
                 <div class="grid__col col-4@m">
                     <div class="card" aria-labelledby="about-the-census" aria-describedby="highlight-id-0" role="navigation" aria-label="Section highlight">
                         <h2 class="u-fs-m" id="about-the-census"><a href="https://census.gov.uk/about-the-census">About the census</a></h2>
@@ -57,8 +57,39 @@ <h2 class="u-fs-m" id="keeping-your-data-safe"><a href="https://census.gov.uk/ke
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-
+        </section>
+    </div>
+    <div class="page__container container">
+        <section class="u-pt-m u-pb-s">
+            <h2 class="u-mb-l">Help with your census</h2>
+            <div class="grid grid--column@xs@s u-mb-l">
+                <div class="grid__col col-7@m">
+                    <div class="card" aria-labelledby="about-the-census" aria-describedby="highlight-id-0" role="navigation" aria-label="Section highlight">
+                        <h2 class="u-fs-m" id="about-the-census"><a href="https://census.gov.uk/about-the-census">How to answer the questions</a></h2>
+                        <p id="highlight-id-0">Guidance on answering the census questions and why we ask them.</p>
+                    </div>
+                    <div class="card u-mt-m" aria-labelledby="why-should-i-take-part-in-the-census?" aria-describedby="highlight-id-1" role="navigation" aria-label="Section highlight">
+                        <h2 class="u-fs-m" id="why-should-i-take-part-in-the-census?"><a href="https://census.gov.uk/about-the-census/why-should-i-take-part">Languages and accessibility</a></h2>
+                        <p id="highlight-id-1">Census in other formats, guides in other languages and accessible formats.</p>
+                    </div>
+                    <div class="card u-mt-m" aria-labelledby="keeping-your-data-safe" aria-describedby="highlight-id-2" role="navigation" aria-label="Section highlight">
+                        <h2 class="u-fs-m" id="keeping-your-data-safe"><a href="https://census.gov.uk/keeping-your-data-safe">Get help where you live</a></h2>
+                        <p id="highlight-id-2">You can get help from a friend or neighbour, or one of our advisers face-to-face or over the phone.</p>
+                    </div>
+                    <div class="card u-mt-m" aria-labelledby="keeping-your-data-safe" aria-describedby="highlight-id-2" role="navigation" aria-label="Section highlight">
+                        <p><a href="#">View all help and guidance</a></p>
+                    </div>
+                </div>
+                <div class="grid__col push-1@m col-4@m u-bl">
+                    <div class="u-pl-m@m u-bl@m u-pt-m@xs@m u-bt@xs@m">
+                        <h3 class="u-fs-r--b">If you don't have a household access code</h3>
+                        <p>You can <a hre="#">request a new household access code</a> to start a new census if you have lost or not received an access code.</p>
+                        <h3 class="u-fs-r--b">Answering separately from your household</h3>
+                        <p>If you prefer to answer separately from the people you live with, you can <a hre="#">request an individual access code</a> to start a separate census.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
 
 </main>

_prototypes/individual-response--your-household-v15/style.css

@@ -79,6 +79,15 @@ h4 {
     }
 }
 
+/* Utility classes */
+.u-bb {
+    border-bottom: 1px solid #888;
+}
+
+.u-bl {
+    border-left: 1px solid #888;
+}
+
 .page__subheader {
     padding: 1rem 0;
 }