styling the standard page introduction text

opentech/public/standardpages/templates/standardpages/information_page.html

@@ -9,16 +9,15 @@
                 {% include "navigation/breadcrumbs.html" %}
             {% endblock %}
 
-            <h1>{{ page.title }}</h1>
-            <h5>{{ page.introduction }}</h5>
+            {% if page.introduction %}
+                <h4 class="heading heading--introduction">{{ page.introduction }}</h4>
+            {% endif %}
 
             {% include_block page.body %}
             {% include "includes/share.html" %}
 
         </section>
-
         {% sidebar %}
-
     </div>
 
     {% include "includes/relatedcontent.html" with related_pages=page.related_pages.all %}

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

+.heading {
+    &--introduction {
+        padding: 0 0 2rem;
+        margin: 2rem 0;
+        font-weight: $weight--light;
+        border-bottom: 1px solid $color--mid-grey;
+    }
+}

opentech/static_src/src/sass/main.scss

@@ -16,6 +16,7 @@
 @import 'components/card';
 @import 'components/call-to-action';
 @import 'components/form';
+@import 'components/heading';
 @import 'components/grid';
 @import 'components/icon';
 @import 'components/input';