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

PropTypeDefaultDescription
titlestringnullThe value of card title.
iconstringnullThe value of card icon render from lucide.
hrefstringnullThe value of card link url.
horizontalbooleanundefinedhorizontal layout for card.

Output Markdown

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>
Edit this page

Last updated May 5, 2026