src/components/Service.vue

   1 <template>
   2   <div>
   3     <div class="card">
   4       <a :href="item.url" :target="item.target" rel="noreferrer">
   5         <div
   6           class="card-content"
   7           :style="(item.colors && item.colors.background) ? {backgroundColor: item.colors.background} : null"
   8         >
   9           <div class="media">
  10             <div v-if="item.logo" class="media-left">
  11               <figure class="image is-48x48">
  12                 <img :src="item.logo" :alt="`${item.name} logo`" />
  13               </figure>
  14             </div>
  15             <div v-if="item.icon" class="media-left">
  16               <figure class="image is-48x48">
  17                 <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i>
  18               </figure>
  19             </div>
  20             <div class="media-content">
  21               <p
  22                 class="title is-4"
  23                 :style="(item.colors && item.colors.text) ? {color: item.colors.text} : null"
  24               >{{ item.name }}</p>
  25               <p
  26                 class="subtitle is-6"
  27                 :style="(item.colors && item.colors.text) ? {color: item.colors.text} : null"
  28               >{{ item.subtitle }}</p>
  29             </div>
  30           </div>
  31           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  32             <strong class="tag-text">#{{ item.tag }}</strong>
  33           </div>
  34         </div>
  35       </a>
  36     </div>
  37   </div>
  38 </template>
  39
  40 <script>
  41 export default {
  42   name: "Service",
  43   props: {
  44     item: Object,
  45   },
  46 };
  47 </script>
  48
  49 <style scoped lang="scss"></style>