Overview

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

Props

Name:titleOptionalType:string

Default Value: ''

Link card title.

Name:iconOptionalType:string | { svg: string }

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

Name:hrefOptionalType:string

Link card navigation URL.

Name:descriptionOptionalType:string

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

Name:targetOptionalType:string

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

9/9/26, 7:33 AM

View All Changelog

• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• 16c2d-docs: update field containeron 6/8/26
• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageCard

Next pageImage Card