Card Slider

A carousel-style layout of cards is effective for concisely presenting a collection of items

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Card sliders take the information into neat, bite-sized cards that users can easily browse through, making it perfect for presenting content in a compact and organized manner, especially when space is limited. With the ability to include images, titles, subtitles, and call-to-action buttons, card sliders add visual appeal to your webpage, making it more enticing for users to explore. You can creatively showcase services, product categories, or recipes, as demonstrated in the preview below... Delicious.

Adding a Card Slider in Vev

Note: If you feel that the card slider doesn't offer enough customization options, we recommend using the Slider component instead. It will enable you to unleash your creativity and tailor it to your specific needs.

Uploading an Image

  • Double-click the Card slider on your canvas

  • In the Icon field, click the pen

  • Upload your image or choose an image from one of our free stock image libraries

Add New and Navigate Cards

  • Double-click the Card slider

  • Click the + button at the bottom of the pop-up

  • Navigate through the cards to customize the text and images

Styling a Card Slider

  • Background:

    • IM: Change the image banner background

    • TE: Change the text container background

    • Link: Change the link background

  • Text:

    • Title: Style the title

    • Subtitle: Style the subtitle

    • Body: Style the body text

    • Link: Style the bottom link

    • BO: Style the bottom link on hover

    • Navigation Arrows: Change the arrow's color (if enabled)

  • Transform: Change the image banner height

  • Icons:

    • Set custom shape: Replace the default icon with a shape or a custom SVG.

    • Set custom image: Replace the default icon with an image.

Configuration options

Once you've added the Card slider to your canvas, there are a variety of configuration options, including titles, sub-titles, and CTA actions.
โ€‹
To start, double-click the Card slider to open the configuration options.

Parameter

Description

Image

Image for the card item

Custom image size

Sets the height of the image to a custom value. Width is automatically scaled to maintain the image aspect ratio.

Title

The top-most text in the text group.

Sub-title

The second line of text in the text group.

Body

The third text element in the text group.

Link label

The UI text for the link button.

Link

The destination where the user will be directed upon clicking the link.

Horizontal image alignment

The left-to-right alignment of the image.

Hide arrows

Show or hide the left/right arrows which can be used for navigating through the card slider.

Did this answer your question?