VPCard

Less than 1 minute

Card component, can be use to display items.

Demo

Basic Card

<VPCard
  title="Mr.Hope"
  desc="Where there is light, there is hope"
  logo="https://mister-hope.com/logo.svg"
  link="https://mister-hope.com"
  background="rgba(253, 230, 138, 0.15)"
/>

Props

title

Type: string
Required: Yes

Card title

desc

Type: string
Default: ''

Card description

logo

Type: string
Required: No

Card logo

link

Type: string
Required: No

Card link

background

Type: string
Required: No

Card background

color

Type: string
Required: No

Card font color

Tips

To make background and font color adapt to dark mode automatically, you can pass css variable, such as: var(--my-bg).

Container

If you want multiple cards in a responsive container, you can wrap them in a div with class vp-card-container:

Responsive Card Container

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

Mr.Hope

Where there is light, there is hope

<div class="vp-card-container">
  <VPCard
    v-for="i in 12"
    title="Mr.Hope"
    desc="Where there is light, there is hope"
    logo="https://mister-hope.com/logo.svg"
    link="https://mister-hope.com"
    background="rgba(253, 230, 138, 0.15)"
  />
  <VPCard
    title="Mr.Hope"
    desc="Where there is light, there is hope"
    logo="https://mister-hope.com/logo.svg"
    link="https://mister-hope.com"
    background="rgba(253, 230, 138, 0.15)"
  />
  <VPCard
    title="Mr.Hope"
    desc="Where there is light, there is hope"
    logo="https://mister-hope.com/logo.svg"
    link="https://mister-hope.com"
    background="rgba(253, 230, 138, 0.15)"
  />
</div>