Cards

Cards are versatile components for showcasing features, navigation links, or grouped information.

Basic Card#

<Card>

Getting Started

Set up your first Dory project in minutes.

Add an href prop to make the entire card clickable:

<Card>

Installation

Install Dory globally or as a project dependency.

Add content inside the card for richer layouts:

<Card>

API Rate Limits

The default rate limit is 1000 requests per hour per API key.

Use <CardGroup> to arrange cards in a responsive grid:

TypeScript

Full type definitions included.

Open Source

Contributions welcome.

Zero Config

Works out of the box with sensible defaults.

Extensible

Customize themes, fonts, and components.

Build

Compile MDX into a static site.

Preview

Serve the built site locally.

Deploy

Upload dist/ to any static host.

Add numbered to a CardGroup to label each card 01, 02, 03 in reading order.

Install

One Docker command. Runs on your machine.

Connect a database

Pick an engine, test, connect.

Explore the graph

Tables as nodes, keys as edges.

Prop	Type	Description
`title`	`string`	Card heading.
`description`	`string`	Optional subtitle text.
`icon`	`string`	Clidey Design icon name (e.g. `"promote"`, `"code"`).
`href`	`string`	Makes the card a link. Navigates on click.
`children`	`ReactNode`	Rich content rendered inside the card body.

Prop	Type	Default	Description
`cols`	`1 \| 2 \| 3 \| 4`	`2`	Number of columns in the grid. Responsive — collapses to 1 on mobile.
`numbered`	`boolean`	`false`	Label cards 01, 02, 03 in order.

Was this page helpful?