Card

You can add cards in Markdown content.

Config

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        card: true,
      },
    },
  }),
});

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        card: true,
      },
    },
  }),
};

Usage

You can use card fence block to add a card into your markdown content.

```card
# card data here
```

By default, you should use YAML format to write card data, but you can also use JSON format by adding :json suffix to fence block.

```card:json
{
  // card data here
}
```

Card data supports title, desc, logo, link and color properties.

If you want to place multiple cards together, you can wrap them in card container:

::: card

```card
# card data here
```

```card
# card data here
```

...

:::

Demo

Mr.Hope

---

Where there is light, there is hope

Mr.Hope

---

Where there is light, there is hope

```card
title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
color: rgba(253, 230, 138, 0.15)
```

```card:json
{
  "title": "Mr.Hope",
  "desc": "Where there is light, there is hope",
  "logo": "https://mister-hope.com/logo.svg",
  "link": "https://mister-hope.com",
  "color": "rgba(253, 230, 138, 0.15)"
}
```