Components

Card

Reference for creating interactive cards with icons, images, and call-to-action buttons using both the editor UI and the Card component.

Overview

Cards let you create visually rich navigation and feature blocks with titles, descriptions, icons, images, and call-to-action (CTA) text.

You can work with cards in two ways:

Editor UI: Insert and configure cards/card groups from the slash (/) menu.
MDX: Use the <Card> and <Columns> components directly in your content.

Common use cases:

Feature showcases with icons and descriptions
Navigation cards linking to documentation sections
Product or service listings with images
Quick links with visual hierarchy
Getting started guides and tutorials

Getting Started

Learn the fundamentals and get your project up and running in minutes.

API Reference

Explore our complete API documentation with interactive examples.

Create cards with the editor UI

Add a single card

Place your cursor on a new line in the editor.
Type / to open the component picker.
Select Card.
A new card appears with a default title and description.

Edit card content

Title: Click the three-dot menu on the card, and in the card title text type your own.
Description: Click the “Card description…” placeholder and type your own text.

If you don’t want a description, click the placeholder and delete it.

Configure card settings

Click the three-dot menu on the card.
In Card Settings, you can set:
- Title: Card heading.
- URL: Link destination (internal or external).
- Image Path: Path/URL to the card image.
- Icon: Click Select Icon and choose a Lucide icon.
- Call-to-Action Text: Optional CTA label (for example, “Learn more”).
- Horizontal Layout: Toggle on to switch from vertical to horizontal layout.
- Link Target
  - _self : Open in the same tab (default).
  - _blank : Open in a new tab.
Click Save to apply changes.

Card groups in the editor UI

Use Card Group to lay out multiple cards in columns without writing MDX.

Add a Card Group

Place your cursor on a new line.
Type / and select Card Group.
A group with two cards appears by default.

Configure Card Group settings

Click the ... (3-dot) menu on the group to open Card Group Settings.
Under Number of Columns, choose 2, 3, or 4 to control how many cards appear per row.

Add or remove cards in a group

Click the + icon (next to the three-dot menu) to add another card to the group.
Use each card’s trash icon to delete a specific card.
Configure each card’s settings individually using its own three-dot menu.

Create cards with MDX

You can also define cards directly in MDX using the <Card> component.

Basic syntax

<Card title="Getting Started" icon="book-open" href="/getting-started/quickstart">
  Learn the fundamentals and get your project up and running in minutes.
</Card>

Getting Started

Learn the fundamentals and get your project up and running in minutes.

Cards are clickable links by default. The entire card area is interactive when an href is provided.

Card layouts

Vertical cards

Default layout with icon and content stacked vertically:

<Card title="Authentication" icon="lock" href="/api-documentation-and-playground/api-authentication">
  Secure your application with built-in authentication features.
</Card>

Authentication

Secure your application with built-in authentication features.

Horizontal cards

Use horizontal prop for side-by-side icon and content layout:

<Card
  title="Team Collaboration"
  icon="users"
  href="/account-and-billing/team-management"
  horizontal
>
  Work together seamlessly with role-based access control.
</Card>

Team Collaboration

Work together seamlessly with role-based access control.

Horizontal layout works best for compact cards with shorter descriptions.

Card with images

Add visual appeal with header images:

<Card 
  title="Getting Started Guide" 
  icon="book-open" 
  href="/getting-started/quickstart"
  image="https://example.com/image.jpg"
>
  Learn the fundamentals and get your project up and running in minutes.
</Card>

Database Management

Master database operations with best practices for schema design and migrations.

Images are displayed at full width above the card content. Choose images with appropriate aspect ratios.

Call-to-action buttons

Add explicit CTAs to encourage user interaction:

<Card 
  title="Component Library" 
  icon="box" 
  href="/components/heading-and-text" 
  cta="Browse Components"
>
  Build beautiful UIs with our extensive collection of pre-built components.
</Card>

Component Library

Build beautiful UIs with our extensive collection of pre-built components.

CTAs with horizontal layout

<Card 
  title="Analytics Dashboard" 
  icon="bar-chart" 
  href="/analytics-and-insights/user-analytics" 
  horizontal 
  cta="Explore"
>
  Track user behavior and monitor application metrics in real-time.
</Card>

Analytics Dashboard

Track user behavior and monitor application metrics in real-time.

Columns & Card groups in MDX

Use <Columns> to lay out multiple cards in a grid—this mirrors the Card Group behavior in the editor UI.

<Columns cols={2}>
  <Card title="Cloud Deployment" icon="cloud" href="/deployment-and-hosting/deploy-your-documentation">
    Deploy your application to the cloud with step-by-step guides.
  </Card>
  <Card title="CLI Tools" icon="terminal" href="/write-and-publish/code-editor/overview">
    Streamline your workflow with powerful command-line tools.
  </Card>
  <Card title="Configuration" icon="settings" href="/customization-and-configuration/site-configuration">
    Customize every aspect of your application.
  </Card>
</Columns>

Cloud Deployment

Deploy your application to the cloud with step-by-step guides.

CLI Tools

Streamline your workflow with powerful command-line tools.

Configuration

Customize every aspect of your application.

Columns supports cols={2}, cols={3}, cols={4}, or cols={5} for responsive grid layouts.

External links & targets

Open external links in a new tab using the target prop:

<Card 
  title="GitHub Repository" 
  icon="github" 
  href="https://github.com/example/repo" 
  target="_blank"
  cta="View on GitHub"
>
  Explore the source code and contribute to the project.
</Card>

Use target = (_blank) for external links and leave the default (_self) for internal documentation links.

Icons

Cards support Lucide icons for visual identification. Use icon names without the Icon suffix:

<Columns cols={3}>
  <Card title="Security" icon="shield" href="#security">
    Implement industry-standard security measures.
  </Card>
  <Card title="Performance" icon="zap" href="/faqs/fix-performance-issues">
    Optimize for speed and efficiency.
  </Card>
  <Card title="Analytics" icon="bar-chart" href="/analytics-and-insights/user-analytics">
    Track metrics and user behavior.
  </Card>
</Columns>

Security

Implement industry-standard security measures.

Performance

Optimize for speed and efficiency.

Analytics

Track metrics and user behavior.

Popular icons:
book-open, code, database, lock, users, zap, cloud, terminal, settings, shield, bar-chart, webhook, box, palette, github, rocket, arrow-right-left

View all available Lucide icons →

Attributes

path

titlestring

Required

Card heading text displayed prominently at the top.

path

hrefstring

Required

Link destination URL. Can be relative (/docs/guide) or absolute (https://example.com).

path

iconstring

Lucide icon name (without "Icon" suffix). Displays in brand color.

path

imagestring

Header image URL displayed above card content at full width.

path

ctastring

Call-to-action text displayed as a link with arrow icon.

path

horizontalboolean

Use horizontal layout with icon beside content (default: false).

path

targetstring

Link target: _self (same tab, default) or _blank (new tab).

Complete example

Combining all features for a rich card experience:

<Columns cols={2}>
  <Card 
    title="Getting Started Guide" 
    icon="book-open" 
    href="/getting-started/quickstart"
    cta="Read More"
    image="https://example.com/getting-started.jpg"
  >
    Learn the fundamentals and get your project up and running in minutes with our comprehensive quickstart guide.
  </Card>
  
  <Card 
    title="API Reference" 
    icon="code" 
    href="/api-documentation-and-playground/api-authentication"
    cta="View Docs"
    image="https://example.com/api-reference.jpg"
  >
    Explore our complete API documentation with interactive examples and detailed endpoint descriptions.
  </Card>
  
  <Card 
    title="Community Discord" 
    icon="message-circle" 
    href="https://discord.gg/example"
    target="_blank"
    cta="Join Now"
    horizontal
  >
    Connect with developers, get help, and share your projects.
  </Card>
  
  <Card 
    title="GitHub Repository" 
    icon="github" 
    href="https://github.com/example/repo"
    target="_blank"
    cta="View Source"
    horizontal
  >
    Explore the source code and contribute to the project.
  </Card>
</Columns>

Common patterns

Feature grids – Card groups or <Columns> with icons and short descriptions.
Navigation hubs – Cards that link to main sections (Getting Started, API, Guides).
Resource cards – External links to GitHub, Discord, or support tools.
Tutorial flows – Sequence of cards guiding users through multi-step tutorials.

Whether you use the editor UI or MDX, cards stay responsive and accessible by default. Choose the workflow that fits your team—UI for quick editing, MDX for full control in code.

Was this page helpful?

Built with Documentation.AI

Last updated today