---
title: Card & CardGroup
description: Clickable cards for feature overviews, link grids, and navigation.
url: http://localhost:3040/components/card
---

# Card & CardGroup

Clickable cards for feature overviews, link grids, and navigation.

Use `` for individual feature or navigation cards, and `` to lay them out in a responsive grid.

## Example

    Get your docs site running in under five minutes.

    Explore every endpoint with live examples and generated types.

    In-depth walkthroughs for common configuration scenarios.

    Browse the source, open issues, and contribute.

```mdx

    Get running in five minutes.

    Explore every endpoint.

```

## Card with image

Cards can include a top image — useful for showcasing screenshots, product previews, or visual documentation.

    Monitor active users, conversion rates, and retention in real time.

    Send live requests directly from the docs with your own API key.

```mdx

    Monitor active users and conversion rates.

    Send live requests from the docs.

```

## Three columns

    Map old paths to new ones so existing links never break.

    Switch to any Google Font from docs.json — no code changes.

    Announce launches and deprecations with a dismissible top banner.

```mdx

    Map old paths to new ones.

    Switch fonts from docs.json.

    Announce launches and notices.

```

## Props

### ``

| Prop | Type | Description |
|---|---|---|
| `title` | `string` | Card heading |
| `href` | `string` | Destination URL — makes the entire card clickable |
| `icon` | `string` | Icon name (see [available icons](/components/tooltip)) |
| `img` | `string` | Image path shown at the top of the card |

### ``

| Prop | Type | Default | Description |
|---|---|---|---|
| `cols` | `1 \| 2 \| 3 \| 4` | `3` | Number of columns in the grid |