Cards
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.
Cards Usage
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>Note
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.
Link Card
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>Getting Started
Learn how to set up Doccupine and create your first documentation site.
Properties
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.