Skip to content

Commit 7577bb7

Browse files
authored
link cards to columns (#724)
1 parent 1d22c97 commit 7577bb7

File tree

2 files changed

+19
-5
lines changed

2 files changed

+19
-5
lines changed

components/cards.mdx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,23 @@ icon: 'square-mouse-pointer'
2525

2626
</RequestExample>
2727

28-
### Horizontal Card
28+
## Horizontal card
2929

30-
Add a `horizontal` property to make it horizontally displayed.
30+
Add a `horizontal` property to display cards horizontally.
3131

3232
<Card title="Horizontal Card" icon="text" horizontal>
3333
Here is an example of a horizontal card
3434
</Card>
3535

36-
### Image Card
36+
## Image card
3737

3838
Add an `img` property to display an image on the top of the card.
3939

4040
<Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
4141
Here is an example of a card with an image
4242
</Card>
4343

44-
### Link Card
44+
## Link card
4545

4646
You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.
4747

@@ -71,7 +71,20 @@ You can customize the CTA and whether or not to display the arrow on the card. B
7171
```
7272
</RequestExample>
7373

74-
### Props
74+
## Grouping cards
75+
76+
You can group cards in [columns](/components/columns).
77+
78+
<Columns cols={2}>
79+
<Card title="First Card" icon="panel-left-close">
80+
This is the first card.
81+
</Card>
82+
<Card title="Second Card" icon="panel-right-close">
83+
This is the second card.
84+
</Card>
85+
</Columns>
86+
87+
## Props
7588

7689
<ResponseField name="title" type="string" required>
7790
The title of the card

components/columns.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: 'Columns'
33
description: 'Show cards side by side in a grid format'
44
icon: 'columns-2'
5+
keywords: ['card groups']
56
---
67

78
The `Columns` component lets you group multiple `Card` components together. It's most often used to put multiple cards in a grid, by specifying the number of grid columns.

0 commit comments

Comments
 (0)