卡片组件

一个内置组件，允许您以视觉上吸引人的卡片格式显示内容。它包括添加图标、标题、链接和相关内容图像的选项。

分组卡片

示例

用法

将 <Cards> 组件导入到您的页面，其中包括 <Card> 组件。

然后，可选地导入您想要使用的图标。要创建一组卡片，请按照下面的示例操作，其中 <Cards.Card> 组件用于创建卡片，而 <Cards> 组件用于将多个卡片组合在一起。

MDX

import { Cards } from 'nextra/components'
import { CardsIcon, OneIcon, WarningIcon } from '../path/with/your/icons'
 
<Cards>
  <Cards.Card
    icon={<WarningIcon />}
    title="Callout"
    href="/docs/guide/built-ins/callout"
  />
  <Cards.Card
    icon={<CardsIcon />}
    title="Tabs"
    href="/docs/guide/built-ins/tabs"
  />
  <Cards.Card
    icon={<OneIcon />}
    title="Steps"
    href="/docs/guide/built-ins/steps"
  />
</Cards>

单个卡片

一个未包含在 <Cards> 组件中的 <Card> 不会与其他卡片分组。如果您想以不同于页面上其他卡片的格式显示单个卡片，这将非常有用。

示例

关于 Nextra

用法

MDX

<Cards.Card
  icon={<BoxIcon />}
  title="About Nextra"
  href="/about"
  arrow
/>

选项卡步骤