Skip to main content

Cards - Advanced Component

In this video we will understand as how to display the dynamic data in the form of cards using Data Group component.

So when you have huge amount of data coming from the collections and you want to display them in the form of custom cards, then this video is must watch for you

Allows you to display content in the form of beautifully designed cards.

DrapCode Builder Cards

1. Adding a Card​

To add a card, go to the “Advanced” category under the Components panel and drag and drop the "Card" component in the canvas. A libary of readymade cards will open. Click on the card of your choice and it will get added in the page.

DrapCode Builder Cards

If you don't want to add a readymade card, then close the library. A simple card layout will get added in your canvas.

DrapCode Builder Cards

2. How to Get Data Dynamically in a Card?​

We have created a collection that contains data related different products. Now, using the CMS component, Data Group, we will display this data dynamically inside a card.

1. Drop a Data Group​

Go to the components panel and drag-and-drop the data group component in a page.

DrapCode Builder Cards

2. Delete the Default Card​

The data group contains a default card. So go to the card layer and click the delete icon as shown below.

DrapCode Builder Cards

3. Add the Card Component​

After removing the default card, add a pre-built card inside the data group. To add a card, go to the Advanced category in the components panel and drag-and-drop cards component inside the data table. As you drop the component, a library containing different cards will open. Cli

DrapCode Builder Cards

We have also some pre-designed cards in the pre-built section. So you can also drop them inside a data group.

DrapCode Builder Cards

4. Bind the Collection​

Open the settings of the data group component and select the option Get Data from Collection. Then, select the collection that you want to bind to data group to bring data dynamically.

DrapCode Builder Cards

5. Map the Fields​

After binding the collection, map collection fields to the card components one by one. To do so, click on the component, open its settings and tick the checkbox, Get Data from Collection. Then, select the collection fields you want to map.

DrapCode Builder Cards

6. Preview or Publish​

Once done, open the page in the preview or publish mode. As you can see below, the collection data is getting displayed in the form of cards inside a data group.

DrapCode Builder Cards