How to create a clickable q-card with hover effect?

Question

We're using Quasar Framework with Vue.js. Consider the following q-card that is clickable:

<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
  <q-card class="my-card" clickable @click="GetSapRoster">
    <q-card-section class="bg-primary text-white">
      <div class="text-h6">SAP Truck Roster</div>
      <div class="text-subtitle2">Get the truck planning</div>
    </q-card-section>
  </q-card>
</div>

How is it possible to achieve the same effect for a q-card as with a q-btn?

At the moment when using the class cursor-pointer it only fixes the mouse pointer but not the shading effect like a q-btn has.

Answer 1

You can use v-ripple + q-hoverable + q-focus-helper to simulate a button.

For example:

<q-card v-ripple class="my-box cursor-pointer q-hoverable">
     <span class="q-focus-helper"></span>
     <q-card-section>
        ...
     </q-card-section>
</q-card>