カードコンポーネント

視覚的に魅力的なカード形式でコンテンツを表示できる組み込みコンポーネントです。アイコン、タイトル、リンク、関連コンテンツへの画像を追加するためのオプションが含まれています。

グループ化されたカード

例

（カードの例 - 省略）

使用方法

ページに`<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
/>

タブステップ