adding fund box styling

opentech/public/utils/templates/utils/includes/funding.html

 {% load wagtailcore_tags %}
 {% if page.total_funding %}
-    <h2>Funding to date</h2>
-    {% for funding in page.funding.all %}
-    <table>
-        <tr>
-            <td>{{ funding.year }}</td>
-            <td>${{ funding.value }}</td>
-            <td>{{ funding.duration }} months</td>
-            <td><a href="{% pageurl funding.source %}">{{ funding.source }}</a></td>
-        </tr>
-    </table>
-    {% endfor %}
-    <p>Total Funding: {{ page.total_funding }}</p>
+    <div class="fund-box">
+        <h4>Funding to date</h4>
+        {% for funding in page.funding.all %}
+        <div class="fund-box__row">
+            <span>{{ funding.year }}</span>
+            <span>${{ funding.value }}</span>
+            <span>{{ funding.duration }} months</span>
+        </div>
+
+        <h4 class="heading heading--top-space heading--total-funding">Total Funding: <span>${{ page.total_funding }}</span></h4>
+        <a href="{% pageurl funding.source %}">{{ funding.source }}</a>
+        {% endfor %}
+    </div>
 {% endif %}

opentech/static_src/src/sass/components/_fund-box.scss

+.fund-box {
+    padding: 20px 30px;
+    margin: 1rem 0;
+    border: 1px solid $color--mid-grey;
+
+    @include media-query(tablet-landscape) {
+        margin: 3rem 0;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        padding: 0 20px;
+        margin-bottom: 5px;
+        background-color: $color--light-grey;
+    }
+}

opentech/static_src/src/sass/components/_heading.scss

@@ -32,4 +32,10 @@
     &--top-space {
         margin-top: 1rem;
     }
+
+    &--total-funding {
+        span {
+            color: $color--purple;
+        }
+    }
 }

opentech/static_src/src/sass/main.scss

@@ -18,6 +18,7 @@
 @import 'components/call-to-action';
 @import 'components/form';
 @import 'components/heading';
+@import 'components/fund-box';
 @import 'components/grid';
 @import 'components/icon';
 @import 'components/input';