docs: add image props documentation for Card component

- Add section on adding images to cards with examples
- Document src, imagePosition, imageWidth, and imageHeight props
- Include examples showing left and top image positions
- Note that imageWidth/imageHeight are optional as images auto-resize

Co-Authored-By: Catherine Deskur <[email protected]>

Author: devin-ai-integration[bot]

fern/products/docs/pages/component-library/default-components/cards.mdx

@@ -77,6 +77,56 @@ You can use individual cards or [use the `CardGroup` component](/docs/writing-co
 </Tab>
 </Tabs>
 
+## Adding images to cards
+
+Cards support displaying images alongside content. The image automatically resizes to fit the card dimensions, so you typically don't need to specify `imageWidth` or `imageHeight` unless you want to override the default behavior.
+
+<Tabs>
+<Tab title="Card with image">
+<Card 
+    title="Product Overview" 
+    src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400"
+    imagePosition="left"
+>
+    Display an image alongside your card content. The image automatically scales to fit the card.
+</Card>
+</Tab>
+<Tab title="Markdown">
+```jsx
+<Card 
+    title="Product Overview" 
+    src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400"
+    imagePosition="left"
+>
+    Display an image alongside your card content. The image automatically scales to fit the card.
+</Card>
+```
+</Tab>
+</Tabs>
+
+<Tabs>
+<Tab title="Card with image on top">
+<Card 
+    title="Getting Started" 
+    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400"
+    imagePosition="top"
+>
+    Position the image at the top of the card for a banner-style layout.
+</Card>
+</Tab>
+<Tab title="Markdown">
+```jsx
+<Card 
+    title="Getting Started" 
+    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400"
+    imagePosition="top"
+>
+    Position the image at the top of the card for a banner-style layout.
+</Card>
+```
+</Tab>
+</Tabs>
+
 ## Properties
 
 <ParamField path="title" type="string">
@@ -100,3 +150,15 @@ You can use individual cards or [use the `CardGroup` component](/docs/writing-co
 <ParamField path="lightModeColor" type="string">
   Hex color value for the icon in light mode (e.g. `#FF0F00`)
 </ParamField>
+<ParamField path="src" type="string">
+  URL of the image to display in the card. When set, the card displays the image alongside the content.
+</ParamField>
+<ParamField path="imagePosition" type="'top' | 'left' | 'right' | 'bottom'" default="top">
+  Position of the image relative to the card content. Use `imagePosition` to control the layout.
+</ParamField>
+<ParamField path="imageWidth" type="string">
+  Width of the image (e.g. `200px`, `50%`). Only use if you need to override the default sizing. The image automatically resizes to fit the card by default.
+</ParamField>
+<ParamField path="imageHeight" type="string">
+  Height of the image (e.g. `150px`, `100%`). Only use if you need to override the default sizing. The image automatically resizes to fit the card by default.
+</ParamField>