Documentation
Guide
Built-ins
Cards

Cards Component

A built-in component to embed a link in a card with an icon.

Example

CalloutTabsSteps

Usage

First, import the Card and Cards components. Then, import the icons that you want to use. To create a set of cards, follow the example below.

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