app/components/Layout/Pages/Subscription/Card.vue

<template>
  <v-card
    elevation="2"
    outlined
    shaped
    class="card"
    :class="{ ['border-' + color]: true }"
  >
    <span
      v-if="extraHeader"
      class="extraBorder"
      :class="'extraBorder-' + color"
      >{{ extraHeader }}</span
    >

    <div class="card-content">
      <!-- Titre -->
      <v-card-title class="title" :class="{ ['margin-sup']: !extraHeader }">
        {{ title }}
      </v-card-title>

      <v-card-subtitle class="subtitle">
        {{ subTitle }}
        <slot name="card.subTitle" />
      </v-card-subtitle>

      <!-- Texte -->
      <v-card-text>
        <LayoutPagesSubscriptionList :elements="list" :color="color" />
      </v-card-text>

      <!-- Actions -->
      <v-card-actions class="mb-3 card-actions">
        <slot name="card.action" />
      </v-card-actions>
    </div>
  </v-card>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subTitle: {
    type: String,
    required: false,
    default: ''
  },
  extraHeader: {
    type: String,
    required: false,
    default: ''
  },
  color: {
    type: String,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
})
</script>

<style scoped lang="scss">
.card {
  border-width: 1px;
  border-top-width: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;

  .title {
    padding-top: 10px;
    white-space: normal;
    text-transform: uppercase;
  }
  .subtitle {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.25rem;
    opacity: unset;
  }
  //1280 1670
  :deep(.v-btn) {
    padding: 10px;
    width: 100%;
    @media (min-width: 1280px) and (max-width: 1670px) {
      letter-spacing: 0px;
      font-size: 11px;
    }
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 10px;
}

.card-actions {
  margin-top: auto; // pousse les actions en bas
  display: flex;
  flex-direction: column;
}

.extraBorder {
  text-align: center;
  text-transform: uppercase;
  margin: auto;
  border-radius: 0px 0px 5px 5px;
  width: 90%;
  padding: 2px 10px 2px 10px;
  font-weight: bold;
  display: block;
}
.card.border-primary {
  border-color: rgb(var(--v-theme-primary));
}
.card.border-artist {
  border-color: rgb(var(--v-theme-artist));
}
.card.border-school {
  border-color: rgb(var(--v-theme-school));
}
.extraBorder.extraBorder-artist {
  background: rgb(var(--v-theme-artist));
}
.extraBorder.extraBorder-school {
  background: rgb(var(--v-theme-school));
  color: #fff;
}

.margin-sup {
  margin-top: 30px;
}
</style>