feat(component): add card-group

assets/scss/custom.scss

@@ -5,6 +5,12 @@
 @import "~bootstrap-vue/src/index.scss";
 @import "~bootswatch/dist/lux/bootswatch";
 
+.card-columns {
+  @include media-breakpoint-only(sm) {
+    column-count: 2;
+  }
+}
+
 body {
   font-size: 1rem;
 }

components/card-group.vue

@@ -0,0 +1,31 @@
+<template>
+  <b-card-group v-editable="blok" v-bind="groupAttars">
+    <component
+      :is="card.component"
+      v-for="card in blok.cards"
+      :key="card._uid"
+      :blok="card"
+    ></component>
+  </b-card-group>
+</template>
+
+<script>
+export default {
+  props: { blok: { type: Object, required: true } },
+  computed: {
+    groupAttars() {
+      const raw = this.blok;
+      const allowed = ['columns', 'deck', 'class'];
+
+      const filtered = Object.keys(raw)
+        .filter((key) => allowed.includes(key))
+        .reduce((obj, key) => {
+          obj[key] = raw[key];
+          return obj;
+        }, {});
+
+      return filtered;
+    },
+  },
+};
+</script>

plugins/components.js

@@ -4,9 +4,11 @@ import Teaser from '@/components/teaser.vue';
 import Grid from '@/components/grid.vue';
 import Feature from '@/components/feature.vue';
 import Hero from '@/components/hero.vue';
+import CardGroup from '@/components/card-group';
 
 Vue.component('page', Page);
 Vue.component('teaser', Teaser);
 Vue.component('grid', Grid);
 Vue.component('feature', Feature);
 Vue.component('hero', Hero);
+Vue.component('card-group', CardGroup);

storyblok/card-group.js

@@ -0,0 +1,27 @@
+module.exports = {
+  name: 'card-group',
+  display_name: 'Card group',
+  schema: {
+    columns: {
+      type: 'boolean',
+    },
+    deck: {
+      type: 'boolean',
+    },
+    cards: {
+      type: 'bloks',
+    },
+    class: {
+      type: 'text',
+    },
+  },
+  image: null,
+  preview_field: null,
+  is_root: false,
+  preview_tmpl: null,
+  is_nestable: true,
+  all_presets: [],
+  preset_id: null,
+  real_name: 'Card group',
+  component_group_uuid: null,
+};