> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/cards/image-card.md).

# Image card

A media card — image or video — with content blocks positioned over it. Effective for shoppable banners, lookbook tiles, and campaign cards.

## Settings

| Setting                   | Description                                                                                           |
| ------------------------- | ----------------------------------------------------------------------------------------------------- |
| Link                      | Wrap the whole card in a link.                                                                        |
| Open link in new tab      | Opens the card link in a new browser tab.                                                             |
| Type                      | Background media: **Image** or **Video**.                                                             |
| Image / Mobile Image      | Background image, with an optional separate mobile image.                                             |
| Video / Mobile video      | Background video, with an optional separate mobile video.                                             |
| Show overlay              | A translucent color layer between the media and the content, for legibility.                          |
| Overlay color             | Color and opacity of the overlay.                                                                     |
| Height                    | Adapt, fixed sizes (Small → Extra large), fixed ratios, or Fill — set separately for mobile.          |
| Enable sticky             | Pin the content while the background scrolls behind it.                                               |
| Desktop / Mobile position | Anchor the content on a nine-point grid.                                                              |
| Desktop / Mobile gap      | Vertical spacing between the nested content blocks.                                                   |
| Corner radius             | Corner rounding of the card.                                                                          |
| Width                     | **Fill** or **Custom** — set independently for desktop and mobile, with an optional **Max width**.    |
| Color scheme              | Color scheme applied to the card.                                                                     |
| Padding                   | Outer spacing: top / bottom / left / right, with independent mobile values via **Custom for mobile**. |

## Available blocks

Blocks you can add inside the card.

| Block                                                             | Description                                        |
| ----------------------------------------------------------------- | -------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)                   | Main headline.                                     |
| [Subheading](/helix/theme-blocks/basic/subheading.md)             | Small label above or below the heading.            |
| [Text](/helix/theme-blocks/basic/text.md)                         | Rich-text paragraph for supporting copy.           |
| [Button](/helix/theme-blocks/basic/button.md)                     | Single call-to-action with label, link, and style. |
| [Buttons](/helix/theme-blocks/basic/buttons.md)                   | Two side-by-side buttons.                          |
| [Image](/helix/theme-blocks/basic/image.md)                       | Inline image.                                      |
| [Video](/helix/theme-blocks/basic/video.md)                       | An uploaded or external video.                     |
| [Icon](/helix/theme-blocks/basic/icon.md)                         | An icon from the theme library.                    |
| [Group](/helix/theme-blocks/layout/group.md)                      | A container that arranges several blocks together. |
| [Divider](/helix/theme-blocks/layout/divider.md)                  | A horizontal line between content blocks.          |
| [Popup](/helix/theme-blocks/links/popup.md)                       | A button that opens an overlay.                    |
| [Spacer](/helix/theme-blocks/layout/spacer.md)                    | Empty block for adjusting vertical spacing.        |
| [Product card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card.                            |