Cards
A component used to create cards that can be used to display content in a compact and organized way.
Example
Card with Link and icon
Click on me
This is how you use a card with an icon and a link. Clicking on this card brings you to the Card Group page.
Card Horizontal
Horizontal Card
This is a horizontal card layout.
Card Simple
Simple Card
This is a simple card without an icon or link.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | null | The value of card title. |
icon | string | null | The value of card icon render from lucide. |
href | string | null | The value of card link url. |
horizontal | boolean | undefined | horizontal layout for card. |
Output Markdown
<Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
This is how you use a card with an icon and a link. Clicking on this card
brings you to the Card Group page.
</Card>
Published on Feb 20, 2025
