Overview
CardGroup renders a responsive grid of Card components. Use it at the end of articles to link to related content. Each Card is a full-surface link with a lucide icon and hover arrow animation.
Props
CardGroup (container)
| Prop | Type | Default | Description |
|---|---|---|---|
cols | 2 | 3 | 2 | Number of columns at desktop breakpoint |
children | ReactNode | — | One or more <Card> elements |
Card
| Prop | Type | Default | Description |
|---|---|---|---|
icon | string | "file-text" | Lucide icon name (kebab-case) |
title | string | — | Card heading text |
href | string | — | Link destination |
children | ReactNode | — | Short description text |
Usage
Quick Start
Get up and running in under 5 minutes.
InstallationSet up a new helpbase project from scratch.
MDX source
<CardGroup cols={2}>
<Card icon="rocket" title="Article Title" href="/category/slug">
Short description of the linked article.
</Card>
</CardGroup>