1. <vuestic-card title-on-image
    2.               overlay
    3.               image="https://picsum.photos/300/200/?image=1043">
    4.   <template slot="title">
    5.     {{ $t('cards.title.overlayAndTextOnImage') }}
    6.   </template>
    7.   {{ $t('cards.contentText') }}
    8.   <p class="pt-3 mb-0">
    9.     <a class="pr-2 card-link-secondary" href="#">
    10.       {{ $t('cards.link.secondaryAction') }}
    11.     </a>
    12.   </p>
    13. </vuestic-card>

    Props

    • image - String - image url
    • imageAlt - String - text, that placed in image area, when image is loading or can't be loaded
    • stripe - String - color of line above the title image
    • titleOnImage - Boolean - moves text on top of image.
    • overlay - Boolean - shows darkish overlay on top of your image. Works only with title-on-image. Needed for light images to keep text readable.

    • theme - String - color of card background
      Slots

    • title - card title

    • default - card body
      Find DEMOs here!