Overview

Use the <LinkCard> component to display link cards on pages.

Props

titleOptionalstring

Link card title.

iconOptionalstring | { svg: string }

Icon displayed to the left of the title. Supports icons from providers configured in markdown.icon, or image URLs can be used.

hrefOptionalstring

Link card navigation URL.

descriptionOptionalstring

Link card description. It is recommended to use the component's default slot for description content.

targetOptionalstring

Link target behavior.

Slots

Name	Description
default	Card detail content
title	Custom title content

Examples

Input:

<LinkCard title="Title" href="/" description="Card content" />
<LinkCard icon="twemoji:astonished-face" title="Title" href="/" />

Output:

Title

Card content

Title

Using component slots enables richer presentations.

Input:

<LinkCard title="Title" href="/">

  - Card content
  - Card content

</LinkCard>

<LinkCard href="/">
  <template #title>
    <span style="color: red" >Title</span>
  </template>

  - Card content
  - Card content

</LinkCard>

Output:

Title

• Card content
• Card content

Title

• Card content
• Card content

Info

Markdown syntax can also be used within slots, but note that there must be a blank line between the markdown syntax and the tags. Otherwise, it will be parsed as plain text.

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageCard

Next pageImage Card