卡片

<Card> 组件是可点击的样式容器。使用它链接到其他页面或组合相关内容。将卡片与 <Columns> 搭配使用可构建网格布局。

屏幕截图显示的是英文界面。

用法

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Launch your docs in minutes.

</Card>

基础卡片

带标题的简单卡片：

<Card title="Getting Started">

  Set up your first project in under five minutes.

</Card>

带图标的卡片

添加图标，让卡片更具视觉辨识度：

<Card title="Documentation" icon="book">

  Explore our complete documentation to learn all features.

</Card>

带链接的卡片

卡片可以链接到其他页面：

<Card title="API Reference" icon="code" href="/introduction">

  View the complete API documentation.

</Card>

带箭头的卡片

添加箭头指示器，显示卡片会链接到其他位置。外部链接会自动显示箭头，但你也可以为内部链接启用箭头：

<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>

  Check out the source code and contribute.

</Card>

外部链接会自动显示箭头：

<Card title="External Resource" href="https://example.com">

  This card links to an external site.

</Card>

带 CTA 的卡片

在卡片内容下方添加行动号召文本：

<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">

  Unlock advanced features and priority support.

</Card>

组合箭头和 CTA，以实现更醒目的效果：

<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">

  Everything you need to launch your first project.

</Card>

带图片的卡片

在卡片顶部显示图片：

<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=mst25htz">

  A card featuring an image header.

</Card>

使用 Columns 构建卡片网格

使用 Columns 将多个卡片排列为响应式网格：

<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">

    Get up and running in minutes.

</Card>
  <Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">

    Step-by-step learning paths.

</Card>
  <Card title="Examples" icon="flask" href="/components/overview">

    Real-world code examples.

</Card>

</Columns>

三列布局

<Columns cols={3}>
  <Card title="Docs" icon="book">

    Documentation

</Card>
  <Card title="API" icon="code">

    API Reference

</Card>
  <Card title="Blog" icon="newspaper">

    Latest updates

</Card>
</Columns>

Props

Columns Props

下一步