cssvue.jsvuetify.jsvcf-vcard

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


im trying to do this card

but my card is like this enter image description here

my code is like this

 <v-row>
      <v-col cols="12">
        <v-card v-if="country == 'inter'" class="card-3 mx-auto">
          <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.


Solution

  • 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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    
    <div id="app">
    <v-app id="inspire">
      <v-card
        class="mx-auto my-12"
        max-width="374"
      >
    
        <div class="d-flex flex-no-wrap justify-space-between">
          <div>
            <v-avatar
              class="ma-3"
              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/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>