cv2/components/Badge.vue

<template>
  <v-card @hover="onHover">
    <div class="frame">
      <v-img
        :src="img"
        :alt="title"
      />

      <div>
        <v-card-title>{{ title }}</v-card-title>
        <v-card-subtitle v-if="subtitle">{{ subtitle }}</v-card-subtitle>
        <v-card-text v-if="details && expanded">{{ details }}</v-card-text>
        <v-card-actions v-if="details && !expanded">
          <v-btn icon="fas fa-plus" variant="flat" @click="onMoreClick" />
        </v-card-actions>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">

import type { PropType } from '@vue/runtime-core'

defineProps({
  title: {
    type: String,
    required: true
  },
  img: {
    type: String,
    required: true
  },
  subtitle: {
    type: String as PropType<string | null>,
    required: false,
    default: null
  },
  details: {
    type: String as PropType<string | null>,
    required: false,
    default: null
  },
})

const expanded: Ref<boolean> = ref(false)

const onMoreClick = () => {

}
</script>

<style scoped lang="scss">
  .v-card {
    height: 96px;
    width: 196px;
    padding: 10px;

    .frame {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      max-height: 100%;
    }

    .v-img {
      height: 32px;
    }
  }

  .v-card-actions {
    display: none;
  }

  .v-card:hover {
    .v-card-actions {
      display: block;
    }
  }
</style>