diff --git a/content/components/cards.mdx b/content/components/cards.mdx
index ead439273..6323af9de 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>
diff --git a/images/card-with-image.png b/images/card-with-image.png
new file mode 100644
index 000000000..e9e467827
Binary files /dev/null and b/images/card-with-image.png differ