Card component

card.vue

<template>
  <figure>
    <v-lazy-image :src="img"
                  :src-placeholder="lqip"
                  class="w-full object-cover"
                  :alt="alt" />
    <figcaption class="mt-3 max-w-sm">
      <span class="block font-bold text-2xl leading-tight">{{ title }}</span>
      <span class="block text-base tracking-wide">{{ subtitle }}</span>
    </figcaption>
  </figure>
</template>

<script>
export default {
  props: {
    img: {
      type: String,
      required: true,
      default: '',
    },
    lqip: {
      type: String,
    },
    alt: {
      type: String,
      required: false,
      default: '',
    },
    title: {
      type: String,
      required: false,
      default: '',
    },
    subtitle: {
      type: String,
      required: false,
      default: '',
    },
  },
}
</script>