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.
Insert#
For a single card, use /card. For a grid, use /cardgroup and add cards inside it. Each card has settings for title, icon, link, and description — edit them from the inline controls or the inspector panel.
Settings#
Card Group#
| Setting | Values | Default | Description |
|---|---|---|---|
| Columns | 1, 2, 3, 4 | 2 | Columns at desktop widths. Always 1 column on mobile. |
Card#
| Setting | Description |
|---|---|
| Title | Bold title at the top of the card |
| Icon | Pick from Dokly's icon set — see below |
| Link | Destination — internal path or external URL |
| Description | The 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#
The icon picker in the editor surfaces a curated set you can search by name. Common ones include 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 don't see what you need, pick the closest match — readers rarely interpret icons literally.
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.