Cards

Cards are versatile components for navigation, feature lists, and content organization.

Basic Card

<Card title="Quick Start" href="/guides/quickstart">
Get up and running in under 5 minutes.
</Card>

Get up and running in under 5 minutes.

Card with Icon

<Card title="Authentication" icon="key" href="/api-reference/authentication">
Learn how to authenticate API requests.
</Card>

Learn how to authenticate API requests.

CardGroup

Arrange cards in a grid:

<CardGroup cols={2}>
<Card title="Installation" icon="download" href="/install">
Install the SDK
</Card>
<Card title="Configuration" icon="settings" href="/config">
Configure your project
</Card>
</CardGroup>

Install the SDK

Configure your project

Three-Column Layout

<CardGroup cols={3}>
<Card title="REST API" icon="api">
HTTP endpoints
</Card>
<Card title="GraphQL" icon="graphql">
Query language
</Card>
<Card title="WebSocket" icon="zap">
Real-time events
</Card>
</CardGroup>

HTTP endpoints

Query language

Real-time events

Without Description

Cards can be title-only for compact navigation:

<CardGroup cols={4}>
<Card title="Node.js" href="/sdks/node" />
<Card title="Python" href="/sdks/python" />
<Card title="Go" href="/sdks/go" />
<Card title="Ruby" href="/sdks/ruby" />
</CardGroup>

External Links

Link to external sites:

<Card title="GitHub" icon="github" href="https://github.com/yourorg">
View source code and contribute.
</Card>

External links automatically open in a new tab.

Card Props

Prop	Type	Description
`title`	string	Card heading (required)
`href`	string	Link destination
`cta`	string	Call-to-action text with a trailing arrow, pinned to the card foot so cards in a row align
`methods`	string	Comma-separated HTTP methods rendered as coloured chips at the card foot, e.g. `POST,GET`
`icon`	string	Icon name
`children`	ReactNode	Description text

CardGroup Props

Prop	Type	Default	Description
`cols`	1 \| 2 \| 3 \| 4	2	Number of columns
`children`	Card[]	—	Card components

Available Icons

Common icons: api, book, code, download, github, graphql, key, rocket, settings, terminal, users, zap.

See the full icon reference for all available icons.

Use Cases

Feature Overview

Build 500 pages in under 5 seconds

Built-in chat powered by your docs

Sub-50ms response times worldwide

SDK Selection

Full type safety with autocomplete

Plain JSON over HTTPS from any language