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.
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>