106 lines
2.1 KiB
Markdown
106 lines
2.1 KiB
Markdown
---
|
|
title: Link Card
|
|
icon: solar:card-send-linear
|
|
createTime: 2025/10/08 23:14:00
|
|
permalink: /en/guide/components/link-card/
|
|
---
|
|
|
|
## Overview
|
|
|
|
Use the `<LinkCard>` component to display link cards on pages.
|
|
|
|
## Props
|
|
|
|
:::: field-group
|
|
|
|
::: field name="title" type="string" default="''" optional
|
|
Link card title.
|
|
:::
|
|
|
|
::: field name="icon" type="string | { svg: string }" default="''" optional
|
|
Icon displayed to the left of the title. Supports icons from providers configured in
|
|
[markdown.icon](../features/icon.md), or image URLs can be used.
|
|
:::
|
|
|
|
::: field name="href" type="string" default="''" optional
|
|
Link card navigation URL.
|
|
:::
|
|
|
|
::: field name="description" type="string" default="''" optional
|
|
Link card description. It is recommended to use the component's default slot for description content.
|
|
:::
|
|
|
|
::: field name="target" type="string" default="''" optional
|
|
Link target behavior.
|
|
:::
|
|
|
|
::::
|
|
|
|
## Slots
|
|
|
|
| Name | Description |
|
|
|---------|----------------------|
|
|
| default | Card detail content |
|
|
| title | Custom title content |
|
|
|
|
## Examples
|
|
|
|
**Input:**
|
|
|
|
```md :no-line-numbers
|
|
<LinkCard title="Title" href="/" description="Card content" />
|
|
<LinkCard icon="twemoji:astonished-face" title="Title" href="/" />
|
|
```
|
|
|
|
**Output:**
|
|
|
|
<LinkCard title="Title" href="/" description="Card content" />
|
|
<LinkCard icon="twemoji:astonished-face" title="Title" href="/" />
|
|
|
|
Using component slots enables richer presentations.
|
|
|
|
**Input:**
|
|
|
|
```md :no-line-numbers
|
|
<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:**
|
|
|
|
<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>
|
|
|
|
:::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.
|
|
:::
|