src/components/services/Generic.vue

   1 <template>
   2   <div>
   3     <div
   4       class="card"
   5       :style="`background-color:${item.background};`"
   6       :class="item.class"
   7     >
   8       <a :href="item.url" :target="item.target" rel="noreferrer">
   9         <div class="card-content">
  10           <div :class="mediaClass">
  11             <div v-if="item.logo" class="media-left">
  12               <figure class="image is-48x48">
  13                 <img :src="item.logo" :alt="`${item.name} logo`" />
  14               </figure>
  15             </div>
  16             <div v-if="item.icon" class="media-left">
  17               <figure class="image is-48x48">
  18                 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
  19               </figure>
  20             </div>
  21             <div class="media-content">
  22               <p class="title is-4">{{ item.name }}</p>
  23               <p class="subtitle is-6" v-if="item.subtitle">
  24                 {{ item.subtitle }}
  25               </p>
  26             </div>
  27           </div>
  28           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  29             <strong class="tag-text">#{{ item.tag }}</strong>
  30           </div>
  31         </div>
  32       </a>
  33     </div>
  34   </div>
  35 </template>
  36
  37 <script>
  38 export default {
  39   name: "Generic",
  40   props: {
  41     item: Object,
  42   },
  43   computed: {
  44     mediaClass: function () {
  45       return { media: true, "no-subtitle": !this.item.subtitle };
  46     },
  47   },
  48 };
  49 </script>
  50
  51 <style scoped lang="scss">
  52 .media-left {
  53   .image {
  54     display: flex;
  55     align-items: center;
  56   }
  57
  58   img {
  59     max-height: 100%;
  60   }
  61 }
  62 </style>