50 lines
1.5 KiB
Plaintext
50 lines
1.5 KiB
Plaintext
---
|
|
title: Card Group
|
|
description: A component used to create card groups that can be used to display multiple cards in a compact and organized way.
|
|
date: 20-02-2025
|
|
---
|
|
|
|
The CardGroup component is a component used to create card groups that can be used to display multiple cards in a compact and organized way.
|
|
|
|
## Preview
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Heading 1" icon="Heading1">
|
|
This is an example of card content with columns.
|
|
</Card>
|
|
<Card title="Heading 2" icon="Heading2">
|
|
This is an example of card content with columns.
|
|
</Card>
|
|
<Card title="Grid Card" icon="Grid" horizontal>
|
|
This is a horizontal card layout.
|
|
</Card>
|
|
<Card title="Horizontal Card" icon="Layout" horizontal>
|
|
This is a horizontal card layout.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ------------- | -------- | ------- | ------------------------------------------------------- |
|
|
| `cols` | `number` | `{2}` | By default 2 The number of columns per row |
|
|
|
|
## Code
|
|
|
|
```markdown
|
|
<CardGroup cols={2}>
|
|
<Card title="Heading 1" icon="Heading1">
|
|
This is an example of card content with columns.
|
|
</Card>
|
|
<Card title="Heading 2" icon="Heading2">
|
|
This is an example of card content with columns.
|
|
</Card>
|
|
<Card title="Grid Card" icon="Grid" horizontal>
|
|
This is a horizontal card layout.
|
|
</Card>
|
|
<Card title="Horizontal Card" icon="Layout" horizontal>
|
|
This is a horizontal card layout.
|
|
</Card>
|
|
</CardGroup>
|
|
```
|