Documentationdocs

Cards

Highlight content with visual cards

Basic card

Getting Started

A simple card with a title and content.

<Card title="Getting Started">

  A simple card with a title and content.

</Card>

Card with icon

Documentation

Add an icon for visual emphasis.

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

  Add an icon for visual emphasis.

</Card>

Card with link

Quickstart Guide

Cards can link to other pages.

<Card title="Quickstart Guide" icon="play" href="/quickstart">

  Cards can link to other pages.

</Card>

Card group

Use CardGroup to arrange cards in a grid:

Docs

Documentation

API

API Reference

Guides

Tutorials

Support

Get help

<CardGroup cols={2}>
  <Card title="Docs" icon="book">Documentation</Card>
  <Card title="API" icon="code">API Reference</Card>
</CardGroup>

Properties

stringrequired

The title displayed at the top of the card.

string

Font Awesome icon name (e.g., "book", "code", "rocket").

string

URL the card links to.