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:

  1. Open the Parts collection panel (press Alt+P)
  2. In the Cards section, select the Cards container and drag it on your page
  3. After dropping the Cards container on the page, select it and open the Styles and layout panel (press Alt+S) 
  4. Select an orientation for your cards
    • Columns: your cards will align on the horizontal axis
    • Rows: your cards will align on the vertical axis
  5. Then, select the number of columns you want to display (the number of cards on the horizontal axis)

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.

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.

  1. Open the Parts collection panel (press Alt+P)
  2. In the Cards section, select a card and drop it in a Cards container
  3. 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.

  1. Place a Cards container on your page
  2. Place a first Card in your container
  3. Customize your Card by adding text, image or button
  4. Select the Card and grab the Magic Fill tool
  5. Drag it to fill the Cards container horizontally and vertically

Improve your PageFabric skills

Explore user guide

Have a question?

Join us on twitter