---
title: Cards
description: This section previews the Cards component.
date: 20-02-2025
---

I have implemented the `cards` component into markdown which is ready to use.

## Example

### Card with Link and icon

<Card title="Click on me" icon="Link" href="/docs/getting-started/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` | `""`    | 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` | `""`    | horizontal layout for card. |

## Code

<Tabs defaultValue="link" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="link">Card with Link & Icon</TabsTrigger>
    <TabsTrigger value="horizontal">Card Horizontal</TabsTrigger>
    <TabsTrigger value="simple">Card 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>