app/components/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>

      <!-- 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>
        <PagesSubscriptionList
          :elements="list"
          :color="color" />
      </v-card-text>

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

    </v-card>


</template>

<script setup lang="ts">

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subTitle: {
    type: String,
    required: false,
  },
  extraHeader: {
    type: String,
    required: false,
  },
  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%;

    .title{
      padding-top: 10px;
      white-space: normal;
    }
    .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;
      }
    }
  }

  .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>