do I change the positions of title, text, image etc within a card? vue.js-CodePudding

im trying to do this

but my card is like this

my code is like this

 <v-row>
      <v-col cols="12">
        <v-card v-if="country == 'inter'" >
          <v-img
            :src="iconeCardInter(inter2)"
            width="110px"
            height="110px"
            border-right="2px solid black"
            center
          />
          <v-card-title>Go Fund Me</v-card-title>
          <v-card-text>
            >AG: 1001 ----- ----------------------------------</v-card-text
          >
        </v-card>
      </v-col>
    </v-row>
  </v-row>

'-----" is to hide what I wrote

i did v-img thing and not v-icon thing because the icon is in a folder inside my project

im trying to do this with vuetify, i know that just with CSS and tag is easy but i didnt undstrand this v-card prop.

CodePudding user response：

You can use d-flex class of vuetify, for more detail you can read vuetify documentation about flex

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
<v-app id="inspire">
  <v-card
    
    max-width="374"
  >

    <div >
      <div>
        <v-avatar
          
          size="125"
          tile
        >
          <v-img src="https://cdn.vuetifyjs.com/images/cards/cooking.png"></v-img>
        </v-avatar>

        <v-card-title>Go Fund Me</v-card-title>
      </div>
      <div>
        <v-card-text>
          This is card text
        </v-card-text>
      </div>
    </div>
  </v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>