With Content
Project Alpha
ActiveUpdated 2 days ago
Project Beta
PausedUpdated 1 week ago
Project Gamma
ArchivedUpdated 3 weeks ago
Empty State
Nothing here yet
Columns
2 Columns
Project Alpha
Updated 2 days ago
Project Beta
Updated 1 week ago
4 Columns
Project Alpha
Updated 2 days ago
Project Beta
Updated 1 week ago
Project Gamma
Updated 3 weeks ago
Project Delta
Updated today
Props
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Card elements to render in the grid |
| columns | 2 | 3 | 4 | Max columns at largest breakpoint. Default: 3 |
| className | string | Additional classes on the grid container |
Usage
<CardGrid columns={3}>
{items.map(item => (
<Card key={item.id} variant="interactive">
<Card.Header>
<h3>{item.title}</h3>
<Badge variant="success">Active</Badge>
</Card.Header>
<Card.Body>
<p>{item.detail}</p>
</Card.Body>
</Card>
))}
</CardGrid>