Adding an image card

Styling an image card

Configuration options

The Image Card element is one of many ways to display a sliding card full of information and image assets with minimal effort.

Image card in Vev

👍🏽 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

Adding an Image Card

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

Styling an image card

⚙️ 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.

Did this answer your question?