Cards Layout
In this video you will understand how to display data in the form of cards layout using Data Group component.You can create responsive cards. You can display a fill width cards, or 2 column, 3 column, 4 columns and so on and display multiple cards in a single row.
1. Create a Layout
Go to Components on the lefthand-side and you can choose any layout such as Sections. Now drag and drop this layout onto your page. Then form the same Components section choose the Data Group component and similarly drag and drop it on to your page.
2. Fetch Data
Select the Data Group Settings and mention where you want to fetch the data from to display. Then Save these changes.
3. View the Data
Go to Preview and you will find all the data being displayed on this page.
4. Customize the Cards Layout
To do this go to Components and choose Column. With this, you can customize the size and height of the cards as needed by choosing the column Settings. For instance, 12/12 is full width etc. In thiss ection you an choose the screen sizes. grid layout and so on. Then Save the changes. Now add the Cards component into the Layer Manager and reload the page.
You can also choose design of the cards form Pre-Built Layouts in Components. To do this, choose the card design and drag and drop it inside the Data Group. Then Save these changes.
5. Create Responsive Cards
To make the cards responsive, choose the column settings and change the width for the tablet, laptop etc. screens. then go to Preview and choose the screen to have the cards displayed accordingly.
