initial docs

contents/docs/getting-started/components/card/index.mdx

@@ -0,0 +1,70 @@
+---
+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>