Using the Card Slide-Up Widget in Composer 2

The Card Slide-Up widget is a versatile and interactive element that allows you to present content in a dynamic, engaging way.
When a user hovers over a card, additional information slides into view, adding both function and flair to your website design.

Perfect for highlighting services, showcasing team members, or displaying key features — all within a compact, visually appealing format.

✨ Key Features

• Interactive slide-up effect reveals more information on hover.

• Customisable layouts — choose from square or rectangular card shapes.

• Flexible background options — use solid colours, gradients, images, videos, or patterns.

• Overlay controls — adjust overlay colour and opacity for better readability.

• Typography control — fully customise font colours, sizes, and families.

• Icon support — add optional icons with custom styles.

• Borders & corner radius — refine the look with borders and rounded corners.

• Animation support — combine with staggered entry or loading animations.

🧭 How to Use the Card Slide-Up Widget

Step 1: Add the Widget

1. Go to your Back Office.

2. Open the page where you want to add the widget.

3. Click the Widget icon, then select Card Slide-Up.

Step 2: Add Your Content

In the Content tab:

• Upload your image.

• Add a title, description, and optionally an icon.

• Ensure the card size accommodates your content appropriately.

Step 3: Customise the Design

In the Settings tab:

• Choose your card shape (square or rectangle).

• Set background options: colour, gradient, image, video, or pattern.

• Add overlays, borders, and corner radius.

In the Content tab, you can further style fonts and icons.

Step 4: Save and Duplicate

1. Click Insert Widget to add your card.

2. Use the Copy feature to duplicate the widget for consistent styling.

3. Edit each card’s content as needed.

4. Click Save, then Preview your page.

💡 Best Use Cases

The Card Slide-Up widget is ideal for:

• Team member profiles

• Feature highlights

• Service summaries

• Product overviews

This widget helps create visually rich, interactive content while maintaining a clean and user-friendly layout.

Watch the Video Demo:

Video Transcript:

This can be set up in many different ways.

As you can see, this can be used in conjunction with other features such as backgrounds, staggering effects, and animation.

To set this up, please go into your back office in your page, click on the widget icon, then the cards slide up.

Locate your image, give it a title, whether you're having an icon or not.

There are also different options here for you and different styles.

Please add your content in the description box.

Please ensure there is enough space for all of your content to be shown.

It may very well be that there is too much, and you'll have to cater for it.

When you're done with the content, if you wish to customise the look of your slide-up, please go to settings.

This is where you can change the shape, so you can have a square or various rectangles.

You can add a background colour or gradient, image, video, or pattern.

If you choose colour, the colours in your colour palette will appear, or you can add a custom one.

If you choose gradient, once again you have the colours from your colour palette.

You can also add custom ones, and you can choose whether you are having a top-to-bottom or left-to-right gradient.

If you choose an image, you'll have the ability to add an overlay.

Adjust the opacity of this and choose the colour.

Same as for video and pattern.

If you wish, you can add a border to your card, and you can add a corner radius.

This is where it rounds off the edges of your card.

To change the font styles, please move to the content tab.

This is where you can change the font colours, sizes, and font family of your title and description.

You can also adjust the icon.

Once you're all done, press Insert Widget.

I would advise using the copy feature at this point once you are happy with the way the card looks.

I would copy this as many times as you need to ensure that all your settings are consistent.

It will then be a case of editing the content.

Don't forget to hit save and then view.