Adding CTAs for #5

src/App.vue

@@ -13,8 +13,8 @@ export default {
 <style lang="scss">
 
   // add variables here to customize Bootstrap
+  $enable-rounded:              false;
   $headings-font-weight:        400;
-
   $theme-colors: (
     primary: #42b983
   );

src/components/CallToActionItem.vue

@@ -0,0 +1,18 @@
+<template>
+  <div v-editable="blok" class="card mb-5 border-0">
+    <img class="card-img-top" :src="blok.image" alt="Card image cap">
+    <div class="card-body px-0">
+      <h4 class="card-title">{{blok.title}}</h4>
+      <p class="card-text">{{blok.text}}</p>
+    </div>
+    <div class="card-action">
+      <router-link :to="blok.action_link" class="btn btn-block btn-outline-primary text-uppercase">{{blok.action_label}}</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['blok']
+  }
+</script>

src/components/CallToActionsDeck.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+    <div class="card-deck">
+      <template v-for="item in blok.items">
+        <component :blok="item" :is="item.component" :key="item.id"></component>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['blok']
+  }
+</script>

src/main.js

@@ -12,6 +12,8 @@ import Navbar from '@/components/layout/partials/Navbar'
 import SiteFooter from '@/components/layout/partials/SiteFooter'
 import Teaser from '@/components/Teaser'
 import Hero from '@/components/Hero'
+import CallToActionsDeck from '@/components/CallToActionsDeck'
+import CallToActionItem from '@/components/CallToActionItem'
 
 Vue.config.productionTip = false
 
@@ -24,6 +26,8 @@ Vue.component('navbar', Navbar)
 Vue.component('site-footer', SiteFooter)
 Vue.component('teaser', Teaser)
 Vue.component('hero', Hero)
+Vue.component('call-to-actions-deck', CallToActionsDeck)
+Vue.component('call-to-action-item', CallToActionItem)
 
 /* eslint-disable no-new */
 new Vue({