Stacking Cards

Modern day websites need some level of interactivity that help users feel more engaged with their visual and navigation experience. The stacking cards block helps accomplish that with a scroll effect that stacks (or unstacks) subsequent cards as the page is scrolled.

The first card in the line-up is mostly static with the exception of a dynamic field placeholder for a cutout image of a person. In this documentation article we'll consider the cards with dynamic fields and replication capability.

Each stackable card consists of four fieldsets. Consisting of a background image, a title, subtext and call to action buttons.

To get started simply upload an image, add a title, and some subtext (optional), add a label to the Button Label field and select the Show Button Controls toggle to link an entry or custom URL.

If you want to add another stackable card click the small plus icon in the bottom left corner. Rinse and repeat and there you have it, a nice set of stackable cards that users can interact with.