Cards Containers

"Card" widgets are usually displayed in groups. 3 types of containers make it possible to optimize the positioning of the different Cards. Card Columns, Card Decks, and Card Groups work by dragging a Card Widget into the selected container.
Note that you can also use grids, flexbox or any other container to embed Cards widgets.

Containers Types :

The Card Columns (Masonry Style) Widget

When the Card Column Widget is first dropped onto the Page Editor, you will see a faint single row as demonstrated above. It appears like the image above. Double click on it in the Page Editor or in the DOM Navigator to see the Advanced Properties Window.

The Card Column Widget allows you to automate the positioning of the Cards in the container, both in width and in height.
This style of display, commonly called "Masonry” style. It is particularly suitable if the different Cards it contains are of different heights.

Card Columns Example (Masonry)

The Card Deck Widget

When the Card Deck Widget is first dropped onto the Page Editor, you will see a blank rectangle with a dotted line border. It appears like the image above.
Use the Card Deck by dragging and dropping your Card Widgets into the Card Deck.
There are no Advanced Properties for the Card Deck .
The Advanced Properties are set using the Card’s properties. The Card Deck gives you the ability to display cards with equal width and equal height columns. They are not attached to one another.

Card Deck Example

Lorem ipsum dolor sit amet, autem soluta an quo, vis id solum saperet.

The Card Group Widget

When the Card Group Widget is first dropped onto the Page Editor, you will see a blank rectangle with a dotted line border. It appears like the image above. Use the Card Group by dragging and dropping your Card Widgets into the Card Group. There are no Advanced Properties for the Card Group. The Advanced Properties are set using the Card’s properties.
Use the Card Group Widget to display cards as a single attached element with equal width and height columns.

Card Group Example