The Image Card component is a flexible and powerful tool designed to help you easily create sliding cards featuring images and key information. Ideal for highlighting product features, showcasing portfolio work, or introducing team members, this component maintains a sleek, modern aesthetic. With minimal setup, it enhances the visual appeal and interactivity of your web pages, offering users a more engaging and dynamic 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
Once you've added the Image Card to your canvas, you can personalize it with a range of options, including titles, body text, and icon assets.
To start customizing 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.
