Skip to content

Commit 0e8ca87

Browse files
authored
Merge branch 'main' into devin/1761268929-document-accordion-defaultopen
2 parents 109ca99 + 6a1a2d7 commit 0e8ca87

File tree

3 files changed

+71
-1
lines changed

3 files changed

+71
-1
lines changed

fern/products/cli-api-reference/cli-changelog/2025-10-23.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
## 0.94.5
2+
**`(fix):`** Properly reload pages with Markdown snippets if you update the snippet in `fern docs dev`
3+
4+
5+
## 0.94.4
6+
**`(fix):`** Restore support for x-fern-examples path parameters if there is no request body.
7+
8+
19
## 0.94.3
210
**`(fix):`** Fix broken recursive unescaping of \ during handling of \$ in IR generation.
311

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,56 @@ You can use individual cards or [use the `CardGroup` component](/docs/writing-co
7777
</Tab>
7878
</Tabs>
7979

80+
## Adding images to cards
81+
82+
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.
83+
84+
<Tabs>
85+
<Tab title="Card with image">
86+
<Card
87+
title="Product Overview"
88+
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
89+
imagePosition="left"
90+
>
91+
Display an image alongside your card content. The image automatically scales to fit the card.
92+
</Card>
93+
</Tab>
94+
<Tab title="Markdown">
95+
```jsx
96+
<Card
97+
title="Product Overview"
98+
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
99+
imagePosition="left"
100+
>
101+
Display an image alongside your card content. The image automatically scales to fit the card.
102+
</Card>
103+
```
104+
</Tab>
105+
</Tabs>
106+
107+
<Tabs>
108+
<Tab title="Card with image on top">
109+
<Card
110+
title="Getting Started"
111+
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
112+
imagePosition="top"
113+
>
114+
Position the image at the top of the card for a banner-style layout.
115+
</Card>
116+
</Tab>
117+
<Tab title="Markdown">
118+
```jsx
119+
<Card
120+
title="Getting Started"
121+
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
122+
imagePosition="top"
123+
>
124+
Position the image at the top of the card for a banner-style layout.
125+
</Card>
126+
```
127+
</Tab>
128+
</Tabs>
129+
80130
## Properties
81131

82132
<ParamField path="title" type="string">
@@ -100,3 +150,15 @@ You can use individual cards or [use the `CardGroup` component](/docs/writing-co
100150
<ParamField path="lightModeColor" type="string">
101151
Hex color value for the icon in light mode (e.g. `#FF0F00`)
102152
</ParamField>
153+
<ParamField path="src" type="string">
154+
URL of the image to display in the card. When set, the card displays the image alongside the content.
155+
</ParamField>
156+
<ParamField path="imagePosition" type="'top' | 'left' | 'right' | 'bottom'" default="top">
157+
Position of the image relative to the card content. Use `imagePosition` to control the layout.
158+
</ParamField>
159+
<ParamField path="imageWidth" type="string">
160+
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.
161+
</ParamField>
162+
<ParamField path="imageHeight" type="string">
163+
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.
164+
</ParamField>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
0.94.3
1+
0.94.5

0 commit comments

Comments
 (0)