Update header to look like GOV.UK

examples/test-app/app.js

@@ -11,8 +11,8 @@ lookAndFeel.configure(app, {
   webpack: { entry: [path.resolve(__dirname, './assets/scss/main.scss')] }
 });
 
-app.get('/hello-world', (req, res) => {
-  res.render('HelloWorld');
+app.get('/typography', (req, res) => {
+  res.render('Typography');
 });
 
 app.listen(config.port);

examples/test-app/views/Typography.html

@@ -0,0 +1,16 @@
+{% extends "layouts/two_thirds.html" %}
+{% from "components/header.njk" import header %}
+{% from "components/examples.njk" import example %}
+
+{% block head -%}
+  <link href="{{ asset_path }}main.css" media="screen" rel="stylesheet" />
+{% endblock %}
+
+{% block two_thirds -%}
+  {{ header("Typography", "Components") }}
+
+  {{ header(heading="A 48px Bold heading", section="Section marker") }}
+  {{ header(heading="A 36px Bold heading", section="Section marker", size="large") }}
+  {{ header(heading="A 24px Bold heading", section="Section marker", size="medium") }}
+  {{ header(heading="A 19px Bold heading", section="Section marker", size="small") }}
+{%- endblock %}

templates/components/header.njk

@@ -0,0 +1,19 @@
+{#
+  Header
+    heading - (required) Main heading text
+    section - (optional) Section text displayed above the heading
+    size    - (default = 'xlarge') heading size
+
+  When size is not xlarge or large the section will not be displayed as
+  the size and lightness of the text would not be easily read.
+#}
+{% macro header(heading, section='', size='xlarge') %}
+<h1 class="heading-{{ size }}">
+{% if section != '' and (size == 'xlarge' or size == 'large') %}
+  <span class="heading-secondary">
+    {{ section }}
+  </span>
+{% endif %}
+  {{ heading }}
+</h1>
+{% endmacro %}