Cards

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→

Here is the declaration of the Cards component at shuding/nextra/packages/nextra/src/components/cards.tsx (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
})

Callout Code Extensions