Cards (v2)

The following code:

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

looks like this:

Callout Tabs Steps→

Nextra 2 code for the Cards component (opens in a new tab):

export function Card({
  children,
  title,
  icon,
  image,
  arrow,
  href,
  ...props
}: {
  children: ReactNode
  title: string
  icon: ReactNode
  image?: boolean
  arrow?: boolean
  href: string
})

Nextra3 Update

Substitute Card by Cards.Card in the code above:

import { Cards } from 'nextra/components'
import { CardsIcon, OneIcon, WarningIcon } from '@/components/icons'
 
<Cards>
  <Cards.Card icon={<WarningIcon />} title="Callout" href="https://nextra.site/docs/guide/built-ins/callout" />
  <Cards.Card icon={<CardsIcon />} title="Tabs" href="https://nextra.site/docs/guide/built-ins/tabs" />
  <Cards.Card icon={<OneIcon />} title="Steps" href="https://nextra.site/docs/guide/built-ins/steps" />
</Cards>

Here is the declaration of the Cards component for Nextra version 3 at https://github.com/shuding/nextra/main/packages/nextra/src/client/components/cards.tsx (opens in a new tab):

Callout Heroicons