feat: ✨ introduce quick facts component

src/components/QuickFacts.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="quickfacts" :class="{ open: isExpanded }">
+    <h3 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h3>
+
+    <div class="quickfacts__list">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isExpanded: false
+    };
+  },
+  methods: {
+    toggle() {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/base.scss";
+
+.quickfacts {
+  border-radius: 1em;
+  overflow: hidden;
+  margin: 1em 0;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    content: "";
+    display: block;
+
+    top: 1em;
+    right: 1em;
+
+    transform: rotate(180deg);
+    transition: 0.3s all ease-in-out;
+
+    border: {
+      right: 0.75em solid transparent;
+      bottom: 0.75em solid #fff;
+      left: 0.75em solid transparent;
+    }
+  }
+
+  &.open {
+    .quickfacts__head {
+      background-color: $bg-color-light;
+    }
+
+    .quickfacts__list {
+      max-height: 17em;
+      padding: 1.5rem;
+    }
+
+    &:before {
+      transform: rotate(0deg);
+    }
+  }
+
+  &__head {
+    background-color: $bg-color-dark;
+    margin: 0;
+    border: 0;
+    padding: 0.75rem 1.5rem;
+    transition: 0.3s all ease-in-out;
+    cursor: pointer;
+  }
+
+  &__list {
+    background-color: rgba($bg-color-dark, 0.5);
+    max-height: 0em;
+    padding: 0 1.5rem;
+    transition: 0.3s all ease-in-out;
+
+    ul {
+      margin: 0;
+      padding-left: 1.25em;
+    }
+  }
+}
+</style>