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>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>With an Arrow
import { Card, Cards } from 'nextra-theme-docs'
<Cards>
<Card
arrow
title="Card"
href="#"
/>
</Cards>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>