Vev Help Center
Search…
Card Slider
A carousel style layout of cards effective for concisely presenting a collection items.

Configuration Options

Parameter
Type
Description
Image
Image
Image for the card item. (Ex. Hotdog image)
Custom image size
Number
Sets the height of the image to a custom value. Width is automatically scaled to maintain image aspect ratio.
Title
Text
The top-most text in the text group. (Ex. "Chicago Style Hotdog")
Sub-title
Text
The second line of text in the text group. (Ex. "A WEEKEND CLASSIC")
Body
Text
The third text element in the text group. (Ex. "The Chicago Dog is a Windy City classic, and a big favourite with sports fans!")
Link label
Text
The UI text for the link button. (Ex. "Recipe")
Link
Vev link field
Destination where the user will be directed upon clicking the link. See the Link article for more on how to use the link field.
Horizontal image alignment
Dropdown
The left-to-right alignment of the image.
Hide arrows
Boolean
Show or hide the left/right arrows which can be used for navigating through the card slider.

Adding a New Card Item

To add a new card to the slider, double click the Card Slider element to open the settings modal. In here, click the "+" button under the "List" group to add to the list of cards. A new group of fields will appear for you to fill the content of the new card in the Card Slider.

Custom Image Size

The image in each card can be uniquely sized using the Custom image size input field found in the element's settings. This field accepts a numeric value which sets the height of the image. The width will automatically be set to maintain the image aspect ratio.

Image Banner Height

The card is split into two parts; the top portion which is the image banner, and the bottom portion (called Text Container) which holds all the text. If your image size exceeds the banner height then it will be cropped. To grow the height of the image banner itself, use the Editor Styles panel to modify the TRANSFORM > IMAGE BANNER value. Set a pixel value to customize the height of the image banner.

Text Container Height

The portion of the card containing the text content scales as you freely resize the element. In other words, the height of the text container is bounded to element's editor drag handles. The text content will remain beautifully centered as the container height changes.

Styling Options

Background Color

The card is split into two parts; the Image Banner which defines the top portion containing the image, and the Text Container which defines the bottom portion holding all the text. The background color for each of these containers can be set uniquely through Editor Styles Panel > Background > Image Banner for the image banner and Editor Styles Panel > Background > Text Container for the text container.

Rounded Cards

Round the edges of the cards by adding a border radius to the card. This can by accessing the property Editor Panel -> Border Radius -> Card.

Button Color

Each card contains a clickable link. This link can be uniquely styled into a button of the designer's choice. Set the background color of the button through the Editor Styles Panel > Background > Link. The color of the button in the hover state can also be uniquely configured by tweaking the Editor Styles Panel > Background > Link Hover property.

Text

The Card Slider's text content is arranged into a pre-defined typography theme, broken down into a header, sub-title, text-body, and a link element. The font properties for each of these elements can be uniquely customized by modifying the elements found under Editor Panel -> Text.

Text Container Padding

Adjust the spacing around the text content by adjusting the Text Container's padding property found under Editor Panel -> Padding -> Text Container. The input values for the padding field map to the top, right, bottom, and left padding of the text container, respectively.

Spacing Between Text Contents

To modify the space between the header text and the body text, or the space between the body text and the button, one can tweak the margin property on the body text. The margin property affects the amount of free space around the outside of an element. Configure the body text's margin using the Editor Panel -> Margin -> Body interface.

Button Size

Make the button larger or smaller by modifying the button's padding property. Padding adds extra spacing on the inside of the button.
Notice that the padding property only adds spacing on the inside of the button. This is sufficient if the desired goal is to make the button "taller". However, If the goal is to make the button smaller in width, add a margin to the left and right sides of the button. This increases the space to the left and right sides of the button. As a result, the button shrinks in width.

Card Shadow

Add a shadow to the cards by configuring the shadow property found in Editor Panel -> Shadow -> Card. The shadow will be applied to all cards in the card slider set.
​
Last modified 7mo ago