Cards

Overview

The Card and CardGroup components provide a flexible way to present content in a clean, grid-based layout. They are ideal for navigation, feature highlights, and documentation entry points.

Card: A single content container with optional icon and link.
CardGroup: A responsive grid wrapper for organizing multiple cards.

Example

Getting Started

Get up and running quickly.

API Reference

Explore all available endpoints.

Card

A responsive grid layout for organizing multiple Card components.

mdx

<Card title="Getting Started">Get up and running quickly.</Card>

Icon Usage

Icons are resolved dynamically from lucide-react. If the icon name is not found, the value will be rendered as plain text or emoji:

mdx

<Card title="Analytics" icon="BarChart3">
  View insights and metrics.
</Card>

CardGroup

A responsive grid layout for organizing multiple Card components.

mdx

<CardGroup cols={2}>
  <Card title="Getting Started" icon="Rocket" href="/introduction">
    Get up and running quickly.
  </Card>
  <Card title="API Reference" icon="Code2" href="/api-reference/overview">
    Explore all available endpoints.
  </Card>
</CardGroup>

Props

Card component

Prop	Type	Required	Description
`title`	`string`	yes	The main heading displayed on the card.
`icon`	`string`	No	Name of a Lucide icon (e.g. "Rocket"). Falls back to text/emoji if not found.
`href`	`string`	No	If provided, the card becomes clickable and navigates to this route.
`children`	`React.ReactNode`	No	Additional descriptive content displayed below the title.

CardGroup

Prop	Type	Default	Description
cols	number	2	Number of columns in the grid (1–4 supported).
children	React.ReactNode	Yes	The Card components to render inside the grid.

Accessibility Notes

Cards with href behave as links and are keyboard-accessible via Next.js Link.
Ensure title clearly describes the destination or purpose.
Avoid relying solely on color to convey meaning.