---
title: Cards
description: A component used to create cards that can be used to display content in a compact and organized way.
date: 20-02-2025
---

## Example

### Card with Link and icon

<Card title="Click on me" 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 Horizontal

<Card title="Horizontal Card" icon="Layout" horizontal>
  This is a horizontal card layout.
</Card>

### Card Simple

<Card title="Simple Card">
  This is a simple card without an icon or link.
</Card>


## 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

<Tabs defaultValue="link" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="link">Link & Icon</TabsTrigger>
    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
    <TabsTrigger value="simple">Simple</TabsTrigger>
  </TabsList>
  <TabsContent value="link">
    ```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>
    ```
  </TabsContent>
  <TabsContent value="horizontal">
    ```markdown
    <Card title="Horizontal Card" icon="Layout" horizontal>
        This is a horizontal card layout.
    </Card>
    ```
  </TabsContent>
  <TabsContent value="simple">
    ```markdown
    <Card title="Simple Card">
        This is a simple card without an icon or link.
    </Card>
    ```
  </TabsContent>
</Tabs>