// Paste your FULL Playground.vue here
<template>
  <v-container>
    <v-item-group>
      <v-container>
        <v-row>
          <v-col
            v-for="n in 3"
            :key="n"
            cols="12"
            md="4"
          >
            <v-item 
                v-slot="{ active, toggle }"
                disabled
            >

              <v-card
                :color="active ? 'primary' : ''"
                class="d-flex align-center"
                dark
                height="200"
                @click="toggle"
              >
               <v-badge overlap>
                <template v-slot:badge>
                  <v-icon>mdi-magnify</v-icon>
                 </template>
                <v-icon>mdi-clipboard</v-icon>
              </v-badge> 
                  <v-scroll-y-transition>
                  <div
                    v-if="active"
                    class="text-h2 flex-grow-1 text-center"
                  >
                    Active
                  </div>
                </v-scroll-y-transition>
              </v-card>
            </v-item>
          </v-col>
        </v-row>

      </v-container>
    </v-item-group> 
      <!--  -->
  </v-container>
</template>

<script>
  export default {
    data: () => ({
    //
    }),
  }
</script>