Cards display content in a clean, grid-based layout. Perfect for navigation, feature highlights, or organizing related links.

Basic Card

A simple card with a title:

Quick Start Guide

Get up and running in under 5 minutes

<Card title="Quick Start Guide">

  Get up and running in under 5 minutes

</Card>

Card with Link

Make cards clickable by adding an href:

Configuration

Learn how to configure your documentation site

<Card title="Configuration" href="/config/index">

  Learn how to configure your documentation site

</Card>

Card with Icon

Add visual appeal with an icon:

Installation

Step-by-step installation instructions

<Card title="Installation" icon="download">

  Step-by-step installation instructions

</Card>

Full-Featured Card

Combine title, icon, href, and content:

Getting Started

Follow our comprehensive guide to build your first documentation site in minutes

<Card title="Getting Started" href="/quickstart" icon="rocket">

  Follow our comprehensive guide to build your first documentation site in minutes

</Card>

Card with Image

Add a top image using the img prop:

Image card

Image card

This is an example of a card with an image.

<Card title="Image card" img="https://img.freepik.com/free-photo/autumn-season-mountain-fuji-kawaguchiko-lake-japan_335224-95.jpg">

  This is an example of a card with an image.

</Card>

Columns - 2 Columns

Use <Columns cols={2}> to create a 2-column grid:

Quick Start

Get started in 5 minutes

Configuration

Learn about all config options

<Columns cols={2}>

  <Card title="Quick Start" href="/quickstart" icon="zap">

    Get started in 5 minutes

  </Card>

  

  <Card title="Configuration" href="/config" icon="settings">

    Learn about all config options

  </Card>

</Columns>

Columns - 3 Columns

Create a 3-column grid with cols={3}:

Installation

Install the CLI

Configuration

Set up your docs

Publishing

Publish through managed hosting

<Columns cols={3}>

  <Card title="Installation" icon="download">

    Install the CLI

  </Card>

  

  <Card title="Configuration" icon="settings">

    Set up your docs

  </Card>

  

  <Card title="Publishing" icon="cloud-upload">

    Publish through managed hosting

  </Card>

</Columns>

Columns - 4 Columns

Maximum grid density with cols={4}:

Rust

Rust examples

TypeScript

TypeScript examples

Python

Python examples

Go

Go examples

<Columns cols={4}>

  <Card title="Rust" icon="cpu">

    Rust examples

  </Card>

  

  <Card title="TypeScript" icon="file-code">

    TypeScript examples

  </Card>

  

  <Card title="Python" icon="code">

    Python examples

  </Card>

  

  <Card title="Go" icon="braces">

    Go examples

  </Card>

</Columns>

Large Card Grid

Create comprehensive navigation with many cards:

Getting Started

Introduction and overview

Components

Browse all components

Configuration

Configuration reference

Themes

Customize appearance

Navigation

Set up navigation

API Docs

Document your API

Code Examples

Add code snippets

Diagrams

Create visual diagrams

Publish

Publish your docs

Available Options

Card Props

title
string
required

The card title text

href
string

Optional link URL - makes the entire card clickable

icon
string

Icon identifier from Tabler Icons (e.g., "rocket", "settings")

img
string

Optional image URL shown above the card content

Columns Props

cols
number
required

Number of columns (1-4). Common values: 2, 3, 4

Responsive Behavior

Cards automatically adjust to screen size:

  • Desktop: Shows the specified number of columns

  • Tablet: Reduces to 2 columns or fewer

  • Mobile: Stacks to 1 column

The responsive behavior is built-in - you don't need to configure anything!

Best Practices

Use for navigation

Cards excel at creating visual navigation menus. Use them on landing pages or section indexes to guide users to different parts of your documentation.

Add meaningful icons

Icons help users quickly identify card content. Choose icons that clearly represent the card's destination or topic.

Keep content brief

Card content should be concise - one or two sentences max. For longer content, use the card to link to a full page.

Choose appropriate columns

  • 2 columns: Feature highlights, main navigation

  • 3 columns: Balanced grids, common navigation pattern

  • 4 columns: Dense information, many options

Use consistent card heights

Keep content length similar across cards in a group for a cleaner, more professional appearance.

Common Patterns

Feature Showcase

Fast Build Times

Optimized Rust compiler delivers blazing-fast builds

Beautiful Themes

Gorgeous out-of-the-box themes that work on all devices

MDX Support

Use React components directly in your markdown

Documentation Sections

Guides

Step-by-step tutorials and how-to guides

Configuration

Site configuration and setup guides

Examples

Real-world code examples

FAQs

Frequently asked questions

Integration Options

GitHub

GitHub integration

GitLab

GitLab support

Bitbucket

Bitbucket sync

Custom

Custom integrations

Full Image