From 38fd1b771063b329fc6b3a234865eed62e0d5d7c Mon Sep 17 00:00:00 2001
From: Daniel N <2color@users.noreply.github.com>
Date: Tue, 23 Aug 2022 19:18:17 +0200
Subject: [PATCH] Add number block based on one in the docs

---
 .../theme/global-components/NumberBlock.vue   | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/.vuepress/theme/global-components/NumberBlock.vue

diff --git a/src/.vuepress/theme/global-components/NumberBlock.vue b/src/.vuepress/theme/global-components/NumberBlock.vue
new file mode 100644
index 00000000..b486e58e
--- /dev/null
+++ b/src/.vuepress/theme/global-components/NumberBlock.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="number-block">
+    <div v-for="{ value, text } in items" class="number-block-item">
+      <div class="number-block-number">{{ value }}</div>
+      <div>{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NumberBlock',
+  props: {
+    items: {
+      type: Array,
+      default: []
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.number-block-item {
+  background-color: #cbe9e9;
+  margin-top: 1em;
+  padding: 1em;
+  text-align: center;
+}
+
+.number-block-number {
+  color: #296161;
+  font-size: 3em;
+  font-weight: 700;
+}
+
+@media (min-width: $MQNarrow) {
+  .number-block {
+    display: flex;
+    margin-top: 1em;
+  }
+
+  .number-block-item {
+    flex: 1 1 0;
+    margin-right: 1em;
+  }
+
+  .number-block-item:last-child {
+    margin-right: 0;
+  }
+}
+</style>