Cards

Cards Component

The Cards component is a built-in feature in the Docs Theme that allows you to display content in a visually appealing card format. It includes options for adding an icon, title, and a link to related content.

Example

Example 1 Example 2 Example 3

Usage

Add the Card and Cards components to your page. The Card component is used to create a card and the Cards component is used to group multiple cards together.

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"
        strokeWidth={1.5}
        stroke="currentColor"
        className="h-6 w-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
        />
      </svg>
    }
    title="Cards Example"
    href="/examplepage"
  ></Card>

Cards Example

A Card not wrapped in a Cards component will not be grouped with other cards. This can be useful if you want to display a single card in a different format than the rest of the cards on the page.

Example of card not in cards component