DocumentationGuideBuilt-insCards

Cards Component

Example

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

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.

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>
TabsSteps