How to use an svg on card title

  • Hello,
    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.

  • 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-separator />
            <q-field icon='person' helper='should be an email'>
              <q-input v-model='username' float-label='Username'/>
            <q-field icon='lock' helper='Length is at least 10'>
              <q-input v-model='password' type='password' float-label='Password'/>
          <q-card-separator />
            <q-card-actions align='center'>
              <q-btn color='primary' label='Login' @click='submit' class='full-width'></q-btn>

    Now the only missing part is how to use a subtitle with a primary text color

Log in to reply