> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. # Card > Use cards to display content in a box The `` component groups related content and actions in a visually distinct box. Optional elements include icons, titles, and links. You can use individual cards or arrange multiple cards in a responsive grid layout using the `` component. Card groups are useful for organizing feature lists, navigation options, or step-by-step guides. ## Usage #### [Watering guide](/learn/docs/writing-content/components/cards) The icon field references a Font Awesome icon. **`Markdown`** ```jsx Markdown The icon field references a Font Awesome icon. ``` ## Variants ### Group of cards #### [Watering](/learn/docs/writing-content/components/cards) Learn how to water your plants #### [Sunlight](/learn/docs/writing-content/components/cards) Understand sunlight requirements for different plants #### [Soil](/learn/docs/writing-content/components/cards) Choose the right soil for optimal plant growth #### [Fertilizer](/learn/docs/writing-content/components/cards) Apply fertilizer to keep your plants healthy **`Markdown`** ```jsx Markdown Learn how to water your plants Understand sunlight requirements for different plants Choose the right soil for optimal plant growth Apply fertilizer to keep your plants healthy ``` ### Custom icon You can use a custom icon by passing an image tag or a relative path to an SVG file. #### [Plant care](/learn/docs/writing-content/components/cards) Pass in an image tag to use a custom icon. **`Markdown`** ```jsx Markdown } href="/learn/docs/writing-content/components/cards" > Pass in an image tag to use a custom icon. ``` To use a relative path to an SVG file stored in your project: **`Markdown`** ```jsx Markdown Use a relative path to reference an SVG file in your project. ``` ### Custom icon position #### Location You can set the icon position as `left` or `top`. **`Markdown`** ```jsx Markdown You can set the icon position as `left` or `top`. ``` ### Custom icon size #### Size The icon size is calculated as `iconSize * 4` pixels. For a `40px` icon, set `iconSize` to `10` (10 \* 4 = 40px). **`Markdown`** ```jsx Markdown wordWrap The icon size is calculated as `iconSize * 4` pixels. For a `40px` icon, set `iconSize` to `10` (10 * 4 = 40px). ``` ### Images 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. #### Plant care guide Display an image alongside your card content. The image automatically scales to fit the card. **`Markdown`** ```jsx Markdown Display an image alongside your card content. The image automatically scales to fit the card. ``` #### Getting started with plants Position the image at the top of the card for a banner-style layout. **`Markdown`** ```jsx Markdown Position the image at the top of the card for a banner-style layout. ``` ## Properties ### `` properties **`cols`** `number` — default: 2 The number of columns to display in the grid --- ### `` properties **`title`** `string` The title text to display in the card --- **`icon`** `string | img` A [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python'), a relative path to an SVG file (e.g. './images/icon.svg'), or a custom image element --- **`href`** `string` Optional URL that makes the entire card clickable --- **`iconPosition`** `'top' | 'left'` — default: top The position of icon relative to the text. --- **`iconSize`** `number` — default: 8 Size of the icon (width and height) calculated as `iconSize * 4` pixels (e.g., 6 = 24px × 24px, 8 = 32px × 32px). --- **`color`** `string` Hex color value for the icon (e.g. `#FF0F00`). Ignored if `lightModeColor` and `darkModeColor` are both set --- **`darkModeColor`** `string` Hex color value for the icon in dark mode (e.g. `#FF0F00`) --- **`lightModeColor`** `string` Hex color value for the icon in light mode (e.g. `#FF0F00`) --- **`src`** `string` URL of the image to display in the card. When set, the card displays the image alongside the content. --- **`imagePosition`** `'top' | 'left' | 'right' | 'bottom'` — default: top Position of the image relative to the card content. Use `imagePosition` to control the layout. --- **`imageWidth`** `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. --- **`imageHeight`** `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. --- > Use cards to display content in a box