VPCard

Card component, can be use to display items.

Demo

Mr.Hope

---

Where there is light, there is hope

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)"
/>

Options

titleRequiredstring

Card title.

descstring

Card description.

logostring

Card logo.

linkstring

Card link.

backgroundstring

Card background.

colorstring

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:

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

Responsive Card Container

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