Card.vue

<template>
  <b-card class="coscine_card" @click.prevent="openCard()">
    <b-row>
      <div class="col placeholder" style="float: left" />
      <div class="col flag">
        <b-badge
          pill
          variant="warning"
          v-if="flag_visible == true"
          style="float: center"
        >
          {{ flag_text }}
        </b-badge>
      </div>
      <div class="col icon_bar">
        <button
          v-if="editLink !== ''"
          class="edit_button float-right"
          @click.stop.prevent="editCard()"
          style="float: right"
        >
          <EditIcon title="" />
        </button>
      </div>
    </b-row>
    <b-row>
      <div class="col">
        <img class="card_icon" :src="imagePath" alt />
      </div>
    </b-row>
    <b-row>
      <div class="col">
        <h6 v-b-tooltip.hover.bottom="displayName">{{ displayName }}</h6>
      </div>
          <a v-bind:href=this.cardLink class="stretched-link" ></a>
    </b-row>
  </b-card>
</template>

<script>
import { BCard, BRow, BBadge } from "bootstrap-vue";
import Vue from "vue";
Vue.component("b-card", BCard);
Vue.component("b-row", BRow);
Vue.component("b-badge", BBadge);

import EditIcon from "vue-material-design-icons/Pencil.vue";

export default Vue.extend({
  components: {
    EditIcon,
  },
  props: {
    displayName: {
      default: "Name",
      type: String,
    },
    imagePath: {
      default: null,
      type: String,
    },
    editLink: {
      default: "",
      type: String,
    },
    cardLink: {
      default: null,
      type: String,
    },
    flag_visible: {
      default: false,
      type: Boolean,
    },
    flag_text: {
      default: null,
      type: String,
    },
  },
  methods: {
    openCard() {
      window.location.href = this.cardLink;
    },
    editCard() {
      window.location.href = this.editLink;
    },
  },
});
</script>
<style>
.card.coscine_card h6 {
  margin: 0.3em;
  color: #00549f;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card.coscine_card div.card-body {
  padding: 0 0 0 0;
}
.card.coscine_card div.card-body {
  margin-right: -15px;
  margin-left: -15px;
}
.card.coscine_card div.container-fluid {
  padding: 0;
}
.card.coscine_card .card_icon {
  width: 3em;
}
.card.coscine_card {
  cursor: pointer;
  min-width: 9em;
  min-height: 9em;
  max-width: 9em;
  max-height: 9em;
  width: 9em;
  height: 9em;
  margin: 0.5em;
  text-align: center;
}
.card.coscine_card .icon_bar {
  height: 2em;
  visibility: hidden;
  min-width: 3em;
  max-width: 3em;
  width: 3em;
  z-index: 3;
  position: relative;
}
.card.coscine_card:hover .icon_bar {
  visibility: visible;
}
.card.coscine_card:hover {
  background-color: #cccccc;
}
.card.coscine_card .icon_bar .edit_button {
  padding: 0.1em;
  width: auto;
  height: auto;
  font-size: 0em;
  background-color: white;
  color: #00549f;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  border-color: #00549f;
  border-image: none;
}
.card.coscine_card .icon_bar .edit_button:hover {
  color: white;
  background-color: #00549f;
}
.card.coscine_card .placeholder {
  height: 2em;
  min-width: 3em;
  max-width: 3em;
  width: 3em;
}
.card.coscine_card .flag {
  height: 2em;
  min-width: 3em;
  padding: 0.2em;
}
</style>