--- title: 卡片 description: >- 了解如何使用 Card 组件，在网格布局中构建包含图标、图片、链接和 CTA 的可点击样式容器。 --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. `` 组件是可点击的样式容器。使用它链接到其他页面或组合相关内容。将卡片与 `` 搭配使用可构建网格布局。屏幕截图显示的是英文界面。 ## 用法 ```mdx Launch your docs in minutes. ``` ## 基础卡片带标题的简单卡片：在五分钟内设置你的第一个项目。 ```mdx Set up your first project in under five minutes. ``` ## 带图标的卡片添加图标，让卡片更具视觉辨识度：浏览完整文档，了解所有功能。 ```mdx Explore our complete documentation to learn all features. ``` ## 带链接的卡片卡片可以链接到其他页面：查看完整的 API 文档。 ```mdx View the complete API documentation. ``` ## 带箭头的卡片添加箭头指示器，显示卡片会链接到其他位置。外部链接会自动显示箭头，但你也可以为内部链接启用箭头：查看源代码并参与贡献。 ```mdx Check out the source code and contribute. ``` 外部链接会自动显示箭头：此卡片链接到外部网站。 ```mdx This card links to an external site. ``` ## 带 CTA 的卡片在卡片内容下方添加行动号召文本：解锁高级功能并获得优先支持。 ```mdx Unlock advanced features and priority support. ``` 组合箭头和 CTA，以实现更醒目的效果：启动第一个项目所需的一切。 ```mdx Everything you need to launch your first project. ``` ## 带图片的卡片在卡片顶部显示图片：带有图片标题区域的卡片。 ```mdx A card featuring an image header. ``` ## 使用 Columns 构建卡片网格使用 `Columns` 将多个卡片排列为响应式网格：几分钟内即可开始运行。分步学习路径。真实场景的代码示例。 ```mdx Get up and running in minutes. Step-by-step learning paths. Real-world code examples. ``` ### 三列布局文档 API 参考最新更新 ```mdx Documentation API Reference Latest updates ``` ## Props 显示在卡片顶部的标题。 Font Awesome 图标名称（例如 "book"、"code"、"rocket"）。默认以 Solid 变体渲染；添加类似 `light/book` 的样式前缀可更改字重。请参阅 [图标](/cn/content/icons)。卡片链接到的 URL。可以是内部 URL（`/docs/intro`）或外部 URL（`https://example.com`）。显示在卡片顶部的图片路径。在右上角显示箭头指示器（↗）。外部链接（以 `http://` 或 `https://` 开头的 URL）会自动启用。设置为 `true` 可在内部链接上显示，设置为 `false` 可在外部链接上隐藏。显示在卡片内容下方的自定义行动号召文本。仅当同时提供 `href` 时可见。 ## Columns Props 网格中的列数。可接受 1、2、3 或 4。 ## 下一步浏览所有可用组件了解如何在 MDX 中使用组件 ```