Cards are visual links — a title, a description, an icon, and a destination. Card groups arrange them in a grid. Use them for the homepage of a section, "next steps" blocks at the end of pages, and any place readers need to pick from a small set of options.
Example: a 2-column card group#
Quickstart
Five minutes to a live docs site.
Components
Every block you can drop into a page.
API Playground
Make your reference interactive.
Custom domain
Move from *.dokly.co to your own domain.
Source#
<CardGroup cols={2}>
<Card title="Quickstart" icon="rocket" href="/get-started/quickstart">
Five minutes to a live docs site.
</Card>
<Card title="Components" icon="layout-grid" href="/components/overview">
Every block you can drop into a page.
</Card>
</CardGroup>Props#
<CardGroup>#
| Prop | Type | Default | Description |
|---|---|---|---|
cols | 1, 2, 3, 4 | 2 | Columns at desktop widths. Always 1 column on mobile. |
<Card>#
| Prop | Type | Description |
|---|---|---|
title | string | Bold title at the top of the card |
icon | string | Lucide icon name (e.g., rocket, terminal, globe) — see icon picker |
href | string | Destination — internal path or external URL |
children | content | Description text shown below the title |
A single card (no group)#
A <Card> works on its own — useful for a single CTA in the middle of a page.
Trial Pro features for 14 days
Custom domain, AI generation, and analytics — no payment info required.
Available icons#
icon accepts any Lucide icon name in kebab-case. Common ones:
rocket, code, terminal, book, users, globe, palette, layout-grid, list-ordered, image, zap, sparkles, credit-card, command, settings, help-circle, alert-circle, check, arrow-right.
If you pick an icon Dokly doesn't recognize, you'll see a placeholder square in the editor — switch to a real Lucide name.
When to use Cards#
| Situation | Use |
|---|---|
| Hub page (homepage of a section) | CardGroup with 4–8 cards |
| "Where to go next" at the end of a page | CardGroup with 2–4 cards |
| Single highlighted CTA | Bare <Card> |
| Linking sub-pages of the current section | CardGroup |
| Linking unrelated external resources | Bullet list of links, not Cards |
Cards are heavy visually — every card you add competes for attention. If you have more than 8 options, use a list.