Image Cards
Figma Component: 22274-115260
Last modified with commit e868e78 on
by aljosaPM.
The Image Cards component displays a grid of image-based cards with section title and optional description at the top. Each card contains an image, title, and arrow button.
The designer needs to ensure that the background of the image in that area supports sufficient contrast so that text can be overlaid on the image.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display section header | Shows optional section title and description above the cards grid. |
| system | Display cards grid | Shows cards in grid layout. Number of columns adjusts based on viewport size. |
| system | Display card content | Each card shows image, title, and arrow icon button. |
| editor | Configure section header | Set section title for the component. |
| editor | Add and configure cards | Each card requires image, small title and title. Cards can be reordered. |
| editor | Select image type | Editor can choose between light or dark image variant for each card. Light images display black text overlay, dark images display white text overlay for optimal contrast and readability. |
| system | Display optional button | Shows an optional button with link below the cards grid. |
| editor | Configure optional button | Editor can add an optional button below the cards with custom text and link URL. |
| user | View card content | Reads card title and views image. |
| user | Click optional button | Navigates to configured URL. Button shows hover state on hover. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |