Link Card
Overview
Use the <LinkCard> component to display link cards on pages.
Props
Link card title.
Icon displayed to the left of the title. Supports icons from providers configured in markdown.icon, or image URLs can be used.
Link card navigation URL.
Link card description. It is recommended to use the component's default slot for description content.
Link target behavior. Corresponds to the target attribute of the a tag.
The link's rel attribute, corresponding to the rel attribute of the a tag.
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
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.
