Stacked Cards Pattern

The Stacked Cards pattern includes multiple items. For dynamic content, use a List directly inside the Content placeholder. The content displayed when swiping left, right and top is dynamic and must be set by the user. Use this pattern to create a message board or to display multiple images.

Use this pattern when you want to display your elements dynamically in phone or tablet apps. It’s fully compatible with all templates and screens.

Here's the preview in Service Studio:

How to Use the Stacked Cards Pattern

1. Drag the Stacked Cards pattern into your screen.

2. Put your content into the Content placeholder.

3. All available options have default parameters, but you can change them.

4.To use the overlays ( UseOverlays is True by default), place content inside the respective placeholders ( OverlayTop , OverlayRight , OverlayLeft).

a. If the option " Use Overlays " is set to True and you don’t place content in the placeholders, they will not be displayed.
b. If you change the option “ Use Overlays ” to False and add content to the placeholders, they will not be displayed.

5. Publish your mobile app.

Adding Styles to Elements

This example shows you how to add styles to elements in the Pattern:

.stackedcards-bottom, .stackedcards-top, .stackedcards-none {
     border-bottom: 1px solid #ebebeb; // Add a border-bottom to all elements
    background-color: #000; // Set a background-color to all elements
}

Setting the Full Height of Elements

To set the full height of your elements in the Pattern so they fill the entire screen, use this CSS code:

.stackedcards-container,
.stackedcards {
    height: 100vh;
    -servicestudio-height: auto;
}

Defining Specific Heights for All Elements

The height of the first element defines the height of each element in the Pattern. To set a specific height, use this CSS code:

.stackedcards-container {
    height: 500px; // set your height
}

Applying Different Background Colors to Overlays

The overlays are enabled by default and have default colors in the Pattern. If you don’t want to use them, set “ UseOverlays ” to False .

1. If the option " UseOverlays " is set to True and you don’t place content in the placeholders, they will not be displayed.

2. If you change the option “ UseOverlays ” to False and add content to the placeholders, they will not be displayed.

You can set other colors either by adding a container to OverlayTop , OverlayRight or OverlayLeft , and set your class. Or by using the following CSS code:

.stackedcards-overlay.top {
     background-color: #2980b9; //set your background-color
}
.stackedcards-overlay.right {
    background-color: #27ae60; //set your background-color
}
.stackedcards-overlay.left {
    background-color: #c0392b; //set your background-color
}

Creating a Button to Execute Swipes

Create each action and drag the public actions (SwipeLeft, SwipeRight or SwipeTop). In the Stacked Cards block, associate the handler to swipe events.

Creating a ListRemove Button

Create an “OnListRemove” action and drag the ListRemoveNode and the UpdateStackedCards in the public actions of the block.

Input Parameters

Input Parameters	Description	Default Value
StackedOptions	Change stacked cards view from bottom, top or none.	View from bottom
Rotate	Activate the elements’ rotation for each move on stacked cards.	True
Items	Number of visible elements when the stacked options are bottom or top.	5
ElementsMargin	Define the distance of each element when the stacked options are bottom or top.	5
UseOverlays	Enable or disable the overlays for swipe elements.	True

Events

Event Name	Description	Mandatory
OnItemChange	Return the active card's position.	False
OnLeftSwipe	Triggered when swiping left.	False
OnRightSwipe	Triggered when swiping right.	False
OnTopSwipe	Triggered when swiping top.	False

Layout

CSS Selectors

Element	CSS Class	Description
Stacked Cards Wrapper	.stackedcards	Container that wraps all Stacked cards elements.
Selected Active Element	.stackedcards-active	Represents the currently active element.
Overlay Top	.stackedcards-overlay top	Represents the overlay top with the content placed.
Overlay Right	.stackedcards-overlay right	Represents the overlay right with the content placed.
Overlay Left	.stackedcards-overlay left	Represents the overlay left with the content placed.

Compatibility with Other Patterns

Avoid using the Stacked Cards Pattern inside patterns with swipe events / touch events, like Tabs or Carousel.

Samples

The following samples use the Stacked Cards pattern: