diff --git a/components/cards.mdx b/components/cards.mdx index aae9e7fd0..03d8cf92d 100644 --- a/components/cards.mdx +++ b/components/cards.mdx @@ -25,15 +25,15 @@ icon: 'square-mouse-pointer' -### Horizontal Card +## Horizontal card -Add a `horizontal` property to make it horizontally displayed. +Add a `horizontal` property to display cards horizontally. Here is an example of a horizontal card -### Image Card +## Image card Add an `img` property to display an image on the top of the card. @@ -41,7 +41,7 @@ Add an `img` property to display an image on the top of the card. Here is an example of a card with an image -### 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 ``` -### Props +## Grouping cards + +You can group cards in [columns](/components/columns). + + + + This is the first card. + + + This is the second card. + + + +## Props The title of the card diff --git a/components/columns.mdx b/components/columns.mdx index 367f88c8d..279926b27 100644 --- a/components/columns.mdx +++ b/components/columns.mdx @@ -2,6 +2,7 @@ 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.