Card

带图标、标题和插槽的框式内容块 — 与 CardGrid 组合可实现响应式布局。

安装

npx @cloudflare/nimbus-docs add card

yarn dlx @cloudflare/nimbus-docs add card

pnpm dlx @cloudflare/nimbus-docs add card

bunx @cloudflare/nimbus-docs add card

预览

随处编辑

组件就在你的仓库中。编辑 Tailwind 类名、布局或属性 — 无需 fork。

<Card title="随处编辑" icon="ph:pencil-simple">
组件就在你的仓库中。编辑 Tailwind 类名、布局或属性 — 无需 fork。
</Card>

示例

独立使用

不带图标的单张卡片 — 适合需要标题的文本提示。

完全自主拥有

每个组件都在你的仓库中。没有上游 API 会破坏兼容性。

<Card title="完全自主拥有">
每个组件都在你的仓库中。没有上游 API 会破坏兼容性。
</Card>

带图标

Iconify 标识开箱即用 — 可使用任何 ph:*（Phosphor）名称。

智能体就绪

每个页面都提供 markdown 替代版本，智能体可以读取内容而无需解析页面外壳。

<Card title="智能体就绪" icon="ph:robot">
每个页面都提供 markdown 替代版本，智能体可以读取内容而无需解析页面外壳。
</Card>

卡片网格

将多张卡片包裹在 CardGrid 中，打造响应式着陆页区块。

快速

Astro 静态输出。Pagefind 搜索。无运行时框架开销。

自主拥有

组件复制到你的仓库中。自由编辑。

智能体优先

开箱即用的 markdown 替代版本和 llms.txt。

可组合

通过 nimbus-docs add 按需安装。

<CardGrid>
<Card title="快速" icon="ph:lightning">
  Astro 静态输出。Pagefind 搜索。无运行时框架开销。
</Card>
<Card title="自主拥有" icon="ph:package">
  组件复制到你的仓库中。自由编辑。
</Card>
<Card title="智能体优先" icon="ph:robot">
  开箱即用的 markdown 替代版本和 llms.txt。
</Card>
<Card title="可组合" icon="ph:puzzle-piece">
  通过 `nimbus-docs add` 按需安装。
</Card>
</CardGrid>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`title`required	`string`
`icon`	`string`