Link Card
About 270 wordsLess than 1 minute
2025-10-08
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:
Card content
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:
- Card content
- Card content
- 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.