Card Component

A built-in card component of the Docs Theme.

Example

Usage

Default

import { Card, Cards } from 'nextra-theme-docs'
 
<Cards>
  <Card title="Card 1" href="#default" />
  <Card title="Card 2" href="#default" />
  <Card title="Card 3" href="#default" />
</Cards>

Number of Cards per Row

You can use the num prop to specify the number of cards per row. The default is 3 and the maximum is also 3.

import { Card, Cards } from 'nextra-theme-docs'
 
<Cards num={2}>...</Cards>

Card 1 Card 2 Card 3

With an Icon

import { Card, Cards } from 'nextra-theme-docs'
 
<Cards>
  <Card
    icon={
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        ...
      </svg>
    }
    title="Theme Configuration"
    href="#"
  />
</Cards>

Settings

With an Arrow

import { Card, Cards } from 'nextra-theme-docs'
 
<Cards>
  <Card arrow title="Card" href="#" />
</Cards>

Card→

With an Image

import Image from 'next/image'
import { Card, Cards } from 'nextra-theme-docs'
 
<Cards>
  <Card title="Card with an image" image href="#">
    <Image src={'/image.jpg'} width={960} height={540} />
  </Card>
</Cards>

Card with an image

Built-ins Steps