The Image Card component is a versatile tool that allows you to effortlessly create sliding cards enriched with images and information. This element is perfect for showcasing a variety of content, such as product features, portfolio pieces, or team member profiles, all while maintaining a clean and modern design. With minimal effort, you can enhance your web page's visual appeal and interactivity, providing users with an engaging browsing experience.
Pro tip: Utilize the slider and interactions features to create your own customized image card elements. This is particularly useful if you want to include links within your cards!
Configuration options
After adding the Image Card to your canvas, you can customize it with various options such as titles, body text, and icon assets.
To begin configuring the Image Card, simply double-click on it to open the configuration panel.
Parameter | Description |
Image | Image located at the top of the card |
Icon | Image located between the top image and the card content |
Title | The top-most text in the text group. |
Body | The second text element in the text group. |
Limitations
Image Card set too high - Safari issue
In case you are seeing a large white space above the card slider element on mobile, which is cutting off the bottom part of the card slider, this could be due to Safari not interpreting the design correctly. Modifying the image height for mobile can help with this issue, and you should republish your project after making these adjustments to see the changes take effect.
