pengzhanbo 385059f214
docs: update en docs (#708)
* docs: update en docs

* chore: tweak

* chore: tweak

* chore: tweak
2025-10-09 15:46:05 +08:00

2.1 KiB

title, icon, createTime, permalink
title icon createTime permalink
Link Card solar:card-send-linear 2025/10/08 23:14:00 /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, 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:

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

Output:

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
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. :::