JuniorTree

Back

CardLink 组件使用示例

展示如何在 MDX 中使用 CardLink 组件

CardLink 组件使用示例#

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

基础用法#

示例标题

这是一个卡片链接的描述文本,可以包含关于链接内容的简要说明。

带图标#

GitHub

查看我的 GitHub 主页,了解更多项目和代码。

不同样式变体#

Primary 变体#

重要链接

使用 primary 变体的卡片链接会有更明显的边框和阴影效果。

Minimal 变体#

简约风格

minimal 变体提供了更简洁的外观,适合不需要太多强调的场景。

网格布局#

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

<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>
markdown

链接 1

第一个链接的描述

链接 2

第二个链接的描述

Props 说明#

Prop类型默认值说明
titlestring(必需)卡片标题
descriptionstring(必需)卡片描述文本
hrefstring(必需)跳转链接
iconstringundefined可选 SVG path 字符串
variant'default' | 'primary' | 'minimal''default'样式变体
externalbooleantrue是否在新标签页打开
classstring''自定义类名
Edit on GitHub

DOCS