[Feature Request] Access responsive content in card via a slot

[sts-ryan-holton]

Problem to solve

I'm trying to add some custom CSS to the .v-responsive__content element within the Vuetify JS card component. I've looked online and can't seem to find a slot for this, I need to set the z-index value of this element manually as I'm using a ::before on the v-card component to add a background overlay.

I'm having some troubles with targeting this, can someone help/advise?

Proposed solution

My code is as follows, and I believe a proposed solution should allow me to change the content slot so that I can add custom CSS to adjust the z-index:

<v-card
  class="mx-auto mb-8"
  max-width="375"
>
  <v-img
    class="white--text align-end"
    height="200"
    :src="source"
  >
    <v-card-title class="pb-0 mb-n1">Title</v-card-title>
    <v-row>
      <v-col cols="8">
        <v-card-subtitle class="white--text text-truncate py-0">Subtitle</v-card-subtitle>
      </v-col>
      <v-col class="text-right">
        <v-chip
          class="chip-custom chip-custom--primary ma-0 mr-4 mt-n2"
          color="primary"
          text-color="white"
          small
        >
          text
          <v-icon right small class="ml-1">mdi-star</v-icon>
        </v-chip>
      </v-col>
    </v-row>
  </v-img>
</v-card>

[johnleider]

I recently talked to @KaelWD about this. I commonly want to use it as well. In other components we use the content-class prop, or maybe we can remove the inner element, I'll leave that up to @KaelWD

[KaelWD]

I'm having some troubles with targeting this, can someone help/advise?

If you're using scoped styles you need a deep selector to target elements in a child component.