卡片組件

一個內建組件，可讓您以視覺上吸引人的卡片格式顯示內容。它包含用於新增圖示、標題、連結和相關內容圖片的選項。

群組卡片

範例

...(保留原 HTML 程式碼)

用法

將 <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
/>

...(保留原 HTML 程式碼)