Improvement: columns & cards

components/cards.mdx

@@ -25,23 +25,23 @@ icon: 'square-mouse-pointer'
 
 </RequestExample>
 
-### Horizontal Card
+## Horizontal card
 
-Add a `horizontal` property to make it horizontally displayed.
+Add a `horizontal` property to display cards horizontally.
 
 <Card title="Horizontal Card" icon="text" horizontal>
   Here is an example of a horizontal card
 </Card>
 
-### Image Card
+## Image card
 
 Add an `img` property to display an image on the top of the card.
 
 <Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
   Here is an example of a card with an image
 </Card>
 
-### Link Card
+## Link card
 
 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.
 
@@ -71,7 +71,20 @@ You can customize the CTA and whether or not to display the arrow on the card. B
   ```
 </RequestExample>
 
-### Props
+## Grouping cards
+
+You can group cards in [columns](/components/columns).
+
+<Columns cols={2}>
+  <Card title="First Card" icon="panel-left-close">
+    This is the first card.
+  </Card>
+  <Card title="Second Card" icon="panel-right-close">
+    This is the second card.
+  </Card>
+</Columns>
+
+## Props
 
 <ResponseField name="title" type="string" required>
   The title of the card

components/columns.mdx

@@ -2,16 +2,17 @@
 title: 'Columns'
 description: 'Show cards side by side in a grid format'
 icon: 'columns-2'
+keywords: ['card groups']
 ---
 
 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.
 
 <Columns cols={2}>
   <Card title="First Card" icon="panel-left-close">
     Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
   </Card>
   <Card title="Second Card" icon="panel-right-close">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </Card>
 </Columns>