From aeda8304b2e36be8a60d274b44ebd5a442fcb210 Mon Sep 17 00:00:00 2001 From: OrlaJones <113170988+OrlaJones@users.noreply.github.com> Date: Wed, 30 Nov 2022 09:48:16 +0000 Subject: [PATCH] Bar chart draft code --- src/hmrc-design-patterns/bar-chart/index.njk | 65 ++++++++++++++++++++ src/hmrc-design-patterns/bar-chart/style.css | 7 +++ 2 files changed, 72 insertions(+) create mode 100644 src/hmrc-design-patterns/bar-chart/index.njk create mode 100644 src/hmrc-design-patterns/bar-chart/style.css diff --git a/src/hmrc-design-patterns/bar-chart/index.njk b/src/hmrc-design-patterns/bar-chart/index.njk new file mode 100644 index 000000000..563735a1c --- /dev/null +++ b/src/hmrc-design-patterns/bar-chart/index.njk @@ -0,0 +1,65 @@ +--- +title: Bar chart +menuText: Bar chart +layout: twoColumnPage.njk +status: development +--- +{% from "_example.njk" import example %} +{% from "hmrcFrontendInfo.njk" import hmrcFrontendInfo %} + + +{% block content %} + +
+
Health +  (21.9%) +
+
£1,231
+
+ + +
+
Welfare +  (19.6%) +
+
£1,111
+
+ + +
+
Business and Industry +  (14.4%) +
+
£816
+
+ + +
+
State pensions +  (10.1%) +
+
£572
+
+ + +{% endblock %} \ No newline at end of file diff --git a/src/hmrc-design-patterns/bar-chart/style.css b/src/hmrc-design-patterns/bar-chart/style.css new file mode 100644 index 000000000..1bad764ed --- /dev/null +++ b/src/hmrc-design-patterns/bar-chart/style.css @@ -0,0 +1,7 @@ +.graph-green-bar { + border-bottom: 10px solid #28a197; +} + +.graph-grey-bar { + border-top: 2px solid #b1b4b6; +}