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
This is how you use a card with an icon and a link. Clicking on this card brings you to the Card Group page.
Horizontal Card
This is a horizontal card layout.
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="Card with Link and icon" icon="Link" href="/docs/components/card-group">
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>
<Card title="Horizontal Card" icon="Layout" horizontal>
This is a horizontal card layout.
</Card>
<Card title="Simple Card">
This is a simple card without an icon or link.
</Card>
Published on Feb 20, 2025
