Card and Cards
Organize navigation or highlight key features in responsive card grids using the Card and Cards components.
The <Card> and <Cards> components let you group related links, features, or external resources into clean, clickable tiles.
Cards Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | 1 | 2 | 3 | 4 | 2 | Number of columns in the grid layout on desktop screens. |
Card Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | Required | Bold heading text displayed at the top of the card. |
icon | ReactNode | undefined | A Lucide icon or custom SVG element to display next to the card title. |
href | string | undefined | Link destination. When provided, the entire card becomes clickable. Supports internal routes and external URLs. |
children | ReactNode | undefined | Body description text or custom React elements. |
Last updated on October 18, 2026
