Stacking Cards

Preview: https://demo.wocode.com/stacking-cards

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget onto your page, placing it where you would like the cards to appear.
• If you wish to resize the widget, do so after you’ve added all content to the cards.
• Resize the the widget with the blue grab handle on the bottom right of the widget container.
• Tip: the height of the widget may need to be taller than you would expect. Before the cards stack on top of each other, they begin in a tall vertical stack that extends well below the viewport. If you have trouble with cards overflowing other rows, increase the height of the widget even further.

CONTENT SETTINGS

• Open the widget option panel.
• Unique ID: If you plan to use multiple iFrame widgets on the same page, make sure to use unique ID’s for each widget.
• Cards:
  • Click Card Title to begin setting up your first card.
    • In the new window that appears, you may enter a Title, Image and Description. You may also enable a Button, and provide a link for the button.
  • After entering all the appropriate content for the first card, click the Add card link to add another card. Repeat the process of adding content to your second card.
  • Continue adding cards as needed.
  • If you wish to resize the widget, do so now; after you’ve added all content.

DESIGN SETTINGS

The Design settings are labeled with their exact functions, and are are self explanatory. However, we will mention a few key settings here.

• Top Offset: This setting creates an offset from the top of the page so that the top edge of the cards can be seen properly as they stack. The amount of offset you’ll want to use will depend on the height of your header. When the top offset is set correctly, the cards will stack below the header.
• Space Between Cards: This setting does what the name implies – it sets the spacing between the cards.
• Card Description Styling > Description Top Padding / Description Bottom Padding: These padding settings allow you to set the spacing above and below the description on the card. These padding settings effectively provide all the padding settings needed to control spacing between the card title, description and button.

CONNECTED DATA

This widget is compatible with Connected Data, meaning you can generate cards with content populated from a content collection on your site. That content collection can be sourced by an Airtable, Google Sheet, Internal Collection, and more.

• To use this widget with Connected Data, click the gear icon in the widget options, and select Connect to data.
  
• You may also right-click on the widget when the option menu is not opened, and access the same option.
• Note that you will not see this option unless your site has a content collection. You can create a new collection by navigating to Content > Collections in the sidebar menu.

For more information on Connected Data and Dynamic Pages, see our Dynamic Pages documentation.

NOTES AND TIPS

• Limit your card count: When the site visitor scrolls to content below the Stacking Cards widget, they must first scroll through all of the stacking cards to get there. As a best practice, the number of cards in your Stacking Cards widget should not be excessive. An excessive number of cards can result in a considerable effort for a site visitor just to be able to access content below the widget.
• Avoid large collections: When you connect your widget to a content collection, keep in mind that cards will be generated for every item in your collection. If your collection is large – say, 100 items – your Stacking Cards widget will display cards for all of the items in the collection. This creates an issue for site visitors that will not want to scroll past 100 cards to get to content below it (as mentioned in the tip above). Consider connecting this widget to smaller collections.
• Buttons do not work with Connected Data: Buttons do not currently work with Connected Data. This is something we are working to address, but for now you should consider using the widget manually (not connected to data) if buttons are important.