Add a banner ✔

app/assets/stylesheets/components/banner.scss

@@ -0,0 +1,21 @@
+.banner {
+
+  @include core-19;
+  background: $turquoise;
+  color: $white;
+  display: block;
+  padding: $gutter-half $gutter;
+  margin: 0 0 $gutter 0;
+  text-align: center;
+  position: relative;
+
+  &:before {
+    @include core-24;
+    content: '✔';
+    position: absolute;
+    top: $gutter-half;
+    left: $gutter-half;
+    margin-top: -2px;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -37,6 +37,7 @@
 @import 'components/table';
 @import 'components/navigation';
 @import 'components/big-number';
+@import 'components/banner';
 
 @import 'views/job';
 

app/main/views/jobs.py

@@ -56,7 +56,8 @@ def showjob():
         },
         cost='£0.00',
         uploaded_file_name='contact-demo.csv',
-        template_used='Reminder template'
+        template_used='Reminder template',
+        flash_message='We’ve started sending your notifications'
     )
 
 

app/templates/components/banner.html

@@ -0,0 +1,3 @@
+{% macro banner(body) %}
+  <div class='banner'>{{ body }}</div>
+{% endmacro %}

app/templates/views/job.html

@@ -1,5 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import table, field, right_aligned_field_heading %}
+{% from "components/big-number.html" import big_number %}
+{% from "components/banner.html" import banner %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -11,6 +13,8 @@ GOV.UK Notify | Notifications activity
 			{{ uploaded_file_name }} sent with {{ template_used }}
 		</h1>
 
+    {{ banner(flash_message) }}
+
 		<ul class="grid-row job-totals">
 			<li class="column-one-third">
 				{{ big_number(