Card

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

带箭头的卡片

添加箭头以表明卡片是链接。外部链接会自动显示箭头。对于内部链接，可通过 arrow={true} 启用：

<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=mwdojjfh">

  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

下一步