<template>
  <div class="card-playground row row-cols-2 row-cols-lg-3">
    <div class="col">
      <v-card header="Card Header" title="Title" style="max-width: 400px">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum dicta a commodi ad sequi voluptates eum ab sint
          maxime, atque nisi quaerat aut, doloremque deserunt ea rem pariatur. At, laudantium.
        </p>
        <template #footer> <div class="card-footer">Footer</div> </template>
      </v-card>
    </div>
    <div class="col">
      <v-card image-src="https://picsum.photos/300/200" image-top title="Image Top" style="max-width: 400px">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus modi ducimus rerum, aliquid voluptate
          blanditiis est consequuntur eligendi necessitatibus totam obcaecati corrupti voluptatum. Architecto suscipit
          in fugiat vel, quos at?
        </p>
      </v-card>
    </div>
    <div class="col">
      <v-card image-src="https://picsum.photos/300/200" image-bottom title="Image Bottom" style="max-width: 400px">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis saepe laborum sint earum esse maxime corporis
          aliquam corrupti. Quaerat iure voluptatem est libero animi doloremque architecto ipsum illum et culpa!
        </p>
      </v-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { VCard } from '../components';
</script>
