How to use an svg on card title
danielo515 last edited by
Maybe this is a stupid question, but I can’t find any example of this. I want to use an svg image to fill a card title, to totally fill it. If I use an img tag the image appears as a small circle, and I want it to fill the entire title. I also want to fill the background with the primary color.
Any guidance will be very appreciated.
danielo515 last edited by danielo515
At the end it was as simple as using an img tag and put it inside a q-card-media.
Then for the background thing it was just a matter of using bg-primary class on the title:
<q-card > <q-card-media class='bg-primary'> <img src='~assets/MedUX.svg' /> </q-card-media> <q-card-separator /> <q-card-main> <q-field icon='person' helper='should be an email'> <q-input v-model='username' float-label='Username'/> </q-field> <q-field icon='lock' helper='Length is at least 10'> <q-input v-model='password' type='password' float-label='Password'/> </q-field> </q-card-main> <q-card-separator /> <q-card-actions align='center'> <q-btn color='primary' label='Login' @click='submit' class='full-width'></q-btn> </q-card-actions> </q-card>
Now the only missing part is how to use a subtitle with a primary text color