Cards

A component used to create cards that can be used to display content in a compact and organized way.

Example

With prop link + icon

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.

With prop Horizontal

Horizontal Card

This is a horizontal card layout.

Only Card

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{title="Horizontal Card" icon="Layout" horizontal}
This is a horizontal card layout.
:::

:::card{title="Simple Card"}
This is a simple card without an icon or link.
:::

Edit this page

Last updated Aug 13, 2026