Card

Cards are versatile components for highlighting content, creating navigation links, or organizing information into distinct sections.

Basic Card

A simple card with a title:

Getting Started

Begin your journey with our comprehensive quickstart guide.

<Card title="Getting Started">

  Begin your journey with our comprehensive quickstart guide.

</Card>

Card with Icon

Add an icon to make cards more visually distinctive:

Documentation

Explore our complete documentation to learn all features.

<Card title="Documentation" icon="book">

  Explore our complete documentation to learn all features.

</Card>

Card with Link

Cards can link to other pages:

API Reference

View the complete API documentation.

<Card title="API Reference" icon="code" href="/api-reference">

  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:

View on GitHub

Check out the source code and contribute.

<Card title="View on GitHub" icon="github" href="/quickstart" arrow={true}>

  Check out the source code and contribute.

</Card>

External links show the arrow automatically:

External Resource

This card links to an external site.

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

Premium Features

Unlock advanced features and priority support.

Upgrade now

<Card title="Premium Features" icon="star" href="/pricing" cta="Upgrade now">

  Unlock advanced features and priority support.

</Card>

Combine arrow and CTA for maximum emphasis:

Get Started

Everything you need to launch your first project.

Start building

<Card title="Get Started" 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:

Visual Guide

A card featuring an image header.

<Card title="Visual Guide" img="/images/hero.png">

  A card featuring an image header.

</Card>

CardGroup

Use CardGroup to arrange multiple cards in a responsive grid:

Quick Start

Get up and running in minutes.

Tutorials

Step-by-step learning paths.

Examples

Real-world code examples.

Community

Join the discussion.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">

    Get up and running in minutes.

</Card>
  <Card title="Tutorials" icon="graduation-cap" href="/tutorials">

    Step-by-step learning paths.

</Card>
  <Card title="Examples" icon="flask" href="/examples">

    Real-world code examples.

</Card>
  <Card title="Community" icon="users" href="/community">

    Join the discussion.

</Card>
</CardGroup>

Three Column Layout

Docs

Documentation

API

API Reference

Blog

Latest updates

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

Card Props

stringrequired

The title displayed at the top of the card.

string

Font Awesome icon name (e.g., "book", "code", "rocket"). Icons use the Light variant to match the documentation's clean style.

string

URL the card links to. Can be internal (/docs/intro) or external (https://example.com).

string

Path to an image displayed at the top of the card.

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.

string

Custom call-to-action text displayed below the card content. Only visible when href is also provided.

CardGroup Props

numberdefault: 2

Number of columns in the grid. Accepts 1, 2, 3, or 4.