Duplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.
Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.
You can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:
<Card title="Note" icon="badge-info">
Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
</Card>Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
Pass a href prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.
<Card title="Getting Started" icon="rocket" href="/cards">
Learn how to set up Doccupine and create your first documentation site.
</Card>Learn how to set up Doccupine and create your first documentation site.
The title of the card.
The Lucide icon name to display in the card.
A URL or path to link to. When provided, the card becomes a clickable link with interactive styles.
The content of the card.