The Image Card element is one of many ways to display a sliding card full of information and image assets with minimal effort.
๐๐ฝ Adding an image card
From the top menu bar, click on the Add Menu (
Shortcut: M
)Search for and select Image Card
Click and drag the element onto your canvas
Uploading an Image
Double-click the Image Card
Click the pen icon under Image or Icon
Select Add image or choose an image from one of our free stock images libraries
Adding a New Card Text
Double-click the Image Card
Click the + icon located at the bottom of the settings panel
A new Image Card will be added, you can navigate through them to customize the text and icon for each of them as needed.
๐จ Styling an image card
Cropping:
Auto crop: Automatically crop the Top image based on the percentages to the left
Contain: Increases or decreases the size of the Top image to fill the container and preserves the aspect ratio
Stretch to fill: Stretches the Top image to fit the container, regardless of its aspect ratio
Background:
BO: Change the background color of the Content section (where the Title and Body text are)
Text:
TI: Style the card's Title
BO: Style the Body text
Effects: Add different types of shadows or blur effects to the element's container. Learn more about effects
Transform:
TO: Change the Top image's height
BO: Change the card's content section's height
โ๏ธ Configuration options
Once you've added the Image Card to your canvas, there are a variety of configuration options, including titles, body copy and icon assets.
To start, double-click the Image Card to open the configuration options.
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. |