Card sliders organize information into compact, easy-to-browse cards, making them ideal for displaying content in a structured way—especially when space is limited. They can feature images, titles, subtitles, and call-to-action buttons, adding visual appeal and encouraging user interaction. Whether showcasing services, product categories, or recipes (as seen in the preview below), Card sliders make your content more engaging and accessible.
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. |