---
title: Card
description: Cards are versatile components for highlighting content, creating navigation links, or organizing information into distinct sections.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

The `<Card>` component gives you a clickable, styled container for linking to other pages, showcasing features, or grouping related content. Pair cards with `<Columns>` to build grid layouts.

## Usage

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Launch your docs in minutes.
</Card>
```

## Basic Card

A simple card with a title:

<Card title="Getting Started">
  Set up your first project in under five minutes.
</Card>

```mdx
<Card title="Getting Started">
  Set up your first project in under five minutes.
</Card>
```

## Card with Icon

Add an icon to make cards more visually distinctive:

<Card title="Documentation" icon="book">
  Explore our complete documentation to learn all features.
</Card>

```mdx
<Card title="Documentation" icon="book">
  Explore our complete documentation to learn all features.
</Card>
```

## Card with Link

Cards can link to other pages:

<Card title="API Reference" icon="code" href="/introduction">
  View the complete API documentation.
</Card>

```mdx
<Card title="API Reference" icon="code" href="/introduction">
  View the complete API documentation.
</Card>
```

## Card with Arrow

Add an arrow indicator to show the card links somewhere. Arrows appear automatically for external links, but you can enable them for internal links too:

<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
  Check out the source code and contribute.
</Card>

```mdx
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
  Check out the source code and contribute.
</Card>
```

External links show the arrow automatically:

<Card title="External Resource" href="https://example.com">
  This card links to an external site.
</Card>

```mdx
<Card title="External Resource" href="https://example.com">
  This card links to an external site.
</Card>
```

## Card with CTA

Add a call-to-action text below the card content:

<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
  Unlock advanced features and priority support.
</Card>

```mdx
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
  Unlock advanced features and priority support.
</Card>
```

Combine arrow and CTA for maximum emphasis:

<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
  Everything you need to launch your first project.
</Card>

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
  Everything you need to launch your first project.
</Card>
```

## Card with Image

Display an image at the top of the card:

<Card title="Visual Guide" img="/images/card-example-1.webp">
  A card featuring an image header.
</Card>

```mdx
<Card title="Visual Guide" img="/images/card-example.webp">
  A card featuring an image header.
</Card>
```

## Card Grid with Columns

Use `Columns` to arrange multiple cards in a responsive grid:

<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get up and running in minutes.
  </Card>
  <Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
    Step-by-step learning paths.
  </Card>
  <Card title="Examples" icon="flask" href="/components/overview">
    Real-world code examples.
  </Card>
</Columns>

```mdx
<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get up and running in minutes.
  </Card>
  <Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
    Step-by-step learning paths.
  </Card>
  <Card title="Examples" icon="flask" href="/components/overview">
    Real-world code examples.
  </Card>

</Columns>
```

### Three Column Layout

<Columns cols={3}>
  <Card title="Docs" icon="book">
    Documentation
  </Card>
  <Card title="API" icon="code">
    API Reference
  </Card>
  <Card title="Blog" icon="newspaper">
    Latest updates
  </Card>
</Columns>

```mdx
<Columns cols={3}>
  <Card title="Docs" icon="book">
    Documentation
  </Card>
  <Card title="API" icon="code">
    API Reference
  </Card>
  <Card title="Blog" icon="newspaper">
    Latest updates
  </Card>
</Columns>
```

## Props

<ParamField name="title" type="string" required>
  The title displayed at the top of the card.
</ParamField>

<ParamField name="icon" type="string">
  Font Awesome icon name (e.g., "book", "code", "rocket"). Icons use the Light variant to match the documentation's clean style.
</ParamField>

<ParamField name="href" type="string">
  URL the card links to. Can be internal (`/docs/intro`) or external (`https://example.com`).
</ParamField>

<ParamField name="img" type="string">
  Path to an image displayed at the top of the card.
</ParamField>

<ParamField name="arrow" type="boolean">
  Shows an arrow indicator (↗) in the top-right corner. Automatically enabled for external links (URLs starting with `http://` or `https://`). Set to `true` to show on internal links, or `false` to hide on external links.
</ParamField>

<ParamField name="cta" type="string">
  Custom call-to-action text displayed below the card content. Only visible when `href` is also provided.
</ParamField>

## Columns Props

<ParamField name="cols" type="number" default="2">
  Number of columns in the grid. Accepts 1, 2, 3, or 4.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>