cards and callouts

Author: lawreka

content/components/callouts.mdx

@@ -4,7 +4,7 @@ description: 'Use callouts to add eye-catching context to your content'
 icon: 'circle-exclamation'
 ---
 
-Callouts can be styled as notes, warnings, information, tips, or checks:
+Callouts can be styled as a Note, Warning, Info, Tip, or Check:
 
 ### Note Callouts
 

content/components/card-groups.mdx

@@ -4,7 +4,7 @@ description: 'Show cards side by side in a grid format'
 icon: 'rectangles-mixed'
 ---
 
-The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards on the same column.
+The `CardGroup` 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.
 
 <CardGroup cols={2}>
   <Card title="First Card" icon="square-1">

content/components/cards.mdx

@@ -24,8 +24,6 @@ icon: "rectangle"
   ```
 </RequestExample>
 
-
-
 ### Horizontal Card
 
 Add a `horizontal` property to a card to make it horizontally displayed.
@@ -42,6 +40,24 @@ Add an `img` property to a card to display an image on the top of the card.
   Here is an example of a card with an image
 </Card>
 
+### Link Card
+
+You can customize the CTA and whether or not you show the arrow on the card. 
+
+<Card title="Link card" icon="link" href="/content/components/card-groups" arrow="true" cta="Click here">
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+
+<RequestExample>
+  ```jsx Card Example
+  <Card title="Link card" icon="link" href="/content/components/card-groups" arrow="true" cta="Click here">
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+  ```
+</RequestExample>
+
 ## Props
 
 <ResponseField name="title" type="string" required>
@@ -70,4 +86,12 @@ Add an `img` property to a card to display an image on the top of the card.
 
 <ResponseField name="img" type="string">
   The url or local path to an image to display on the top of the card
+</ResponseField>
+
+<ResponseField name="cta" type="string">
+  Label for the action button
+</ResponseField>
+
+<ResponseField name="arrow" type="boolean">
+  Enable or disable the link arrow icon
 </ResponseField>