`<Cards>` Component

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

分组卡片

示例

用法

将 <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/built-ins/callout"
  />
  <Cards.Card
    icon={<CardsIcon />}
    title="Tabs"
    href="/docs/built-ins/tabs"
  />
  <Cards.Card
    icon={<OneIcon />}
    title="Steps"
    href="/docs/built-ins/steps"
  />
</Cards>

单个卡片

未被 <Cards> 组件包裹的 <Card> 不会与其他卡片分组。如果你想以不同于页面上其他卡片的格式显示单个卡片，这会很有用。

示例

About Nextra

用法

MDX


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

<Cards> Component

分组卡片

示例

用法

单个卡片

示例

用法

`<Cards>` Component