diff --git a/content/components/cards.mdx b/content/components/cards.mdx
index b2d91c96c..2715ce0e4 100644
--- a/content/components/cards.mdx
+++ b/content/components/cards.mdx
@@ -18,6 +18,12 @@ icon: "rectangle"
 </Card>
 ```
 
+```jsx Image Card Example
+<Card title="Image Card" img="/images/card-with-image.png">
+  Here is an example of a card with an image
+</Card>
+```
+
 </RequestExample>
 
 ### Horizontal Card
@@ -28,6 +34,14 @@ Add a `horizontal` property to a card to make it horizontally displayed.
   Here is an example of a horizontal card
 </Card>
 
+### Image Card
+
+Add an `img` property to a card to display an image on the top of the card.
+
+<Card title="Image Card" img="/images/card-with-image.png">
+  Here is an example of a card with an image
+</Card>
+
 ## Props
 
 <ResponseField name="title" type="string" required>