> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/integrations/card-link-example.md.
> 展示如何在 MDX 中使用 CardLink 组件

## Page metadata

- **Published:** 2026-01-21
- **Source URL:** https://www.juniortree.com/docs/integrations/card-link-example

# CardLink 组件使用示例

CardLink 是一个用于在 MDX 中创建可点击卡片链接的组件。

## 基础用法

[示例标题](https://example.com)

## 带图标

[GitHub](https://github.com/yourusername)

## 不同样式变体

### Primary 变体

[重要链接](https://example.com)

### Minimal 变体

[简约风格](https://example.com)

## 网格布局

使用 CSS Grid 可以创建多列布局:

```markdown
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 not-prose">
  <CardLink
    title="链接 1"
    description="第一个链接的描述"
    href="https://example1.com"
  />
  <CardLink
    title="链接 2"
    description="第二个链接的描述"
    href="https://example2.com"
  />
</div>
```

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 not-prose">
  [链接 1](https://example1.com)
  [链接 2](https://example2.com)
</div>

## Props 说明

| Prop | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `title` | `string` | (必需) | 卡片标题 |
| `description` | `string` | (必需) | 卡片描述文本 |
| `href` | `string` | (必需) | 跳转链接 |
| `icon` | `string` | `undefined` | 可选 SVG path 字符串 |
| `variant` | `'default' \| 'primary' \| 'minimal'` | `'default'` | 样式变体 |
| `external` | `boolean` | `true` | 是否在新标签页打开 |
| `class` | `string` | `''` | 自定义类名 |