---
title: Cards
description: Card and CardGroup components for navigation and feature highlights.
icon: layout
---

# Cards

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

## Basic Card

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

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

## Card with Icon

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

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

## CardGroup

Arrange cards in a grid:

```mdx
<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>
```

<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>

## Three-Column Layout

```mdx
<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>
```

<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>

## Without Description

Cards can be title-only for compact navigation:

```mdx
<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>
```

<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:

```mdx
<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 |
| `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](/components/overview) for all available icons.

## Use Cases

### Feature Overview

<CardGroup cols={3}>
  <Card title="Fast Builds" icon="zap">
    Build 500 pages in under 5 seconds
  </Card>
  <Card title="AI Assistant" icon="sparkles">
    Built-in chat powered by your docs
  </Card>
  <Card title="Global CDN" icon="globe">
    Sub-50ms response times worldwide
  </Card>
</CardGroup>

### SDK Selection

<CardGroup cols={2}>
  <Card title="TypeScript SDK" icon="code" href="/sdks/typescript">
    Full type safety with autocomplete
  </Card>
  <Card title="Python SDK" icon="code" href="/sdks/python">
    Async support with type hints
  </Card>
</CardGroup>

### Quick Links

<CardGroup cols={4}>
  <Card title="Changelog" href="/changelog" />
  <Card title="API Status" href="https://status.example.com" />
  <Card title="Support" href="mailto:support@example.com" />
  <Card title="Discord" href="https://discord.gg/example" />
</CardGroup>