71 lines
2.1 KiB
Plaintext
71 lines
2.1 KiB
Plaintext
---
|
|
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>
|