Note: You can bind the Cards container to your API and fetch dynamic data when your visitors view your page. To do so, you must use Connectors.
Using cards in PageFabric
Cards are a modern way to display information on the Web. Their purpose is to organize information in boxes that will flow perfectly on all screens.
The Cards container
The Cards container is the place where you drop your cards in. It will manage the layout depending on the visitor's screen size.
To add a Cards container, follow these steps:
- Open the Parts collection panel (press Alt+P)
- In the Cards section, select the Cards container and drag it on your page
- After dropping the Cards container on the page, select it and open the Styles and layout panel (press Alt+S)
- Select an orientation for your cards
- Columns: your cards will align on the horizontal axis
- Rows: your cards will align on the vertical axis
- Then, select the number of columns you want to display (the number of cards on the horizontal axis)
The Cards
You can place as many cards as you want in a Cards container. The layout will be generated automatically depending on the settings you set on the Cards container.
You can find some cards in the Parts collection panel.
- Open the Parts collection panel (press Alt+P)
- In the Cards section, select a card and drop it in a Cards container
- Edit the card as you want by adding text, an image or a button
If it's the first card you drop in a Cards container, you can use the Magic Fill feature to duplicate rapidly your content.
Using Magic Fill
Magic Fill is a feature that helps you create your layouts faster.
When you place your first Card in a Cards container, it becomes a reusable template.
- Place a Cards container on your page
- Place a first Card in your container
- Customize your Card by adding text, image or button
- Select the Card and grab the Magic Fill tool
- Drag it to fill the Cards container horizontally and vertically