Flexible Card Grid Example

You can add as many cards to a Flexible Card Grid Block as you like. you When there is no more room on a row, a card will automatically get moved to a new row. Explicitly set the size of each card to create mixed layouts.

A ⅓ width card looks like this.

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet. Vestibulum id nisl hendrerit, semper justo sed, pellentesque ex. Phasellus mattis sem sit amet elementum tempor. Phasellus consectetur sem dictum viverra placerat.

A 1/4 card will flex to become a ⅓ card if there are only three.

Phasellus mattis sem sit amet elementum tempor. Phasellus consectetur sem dictum viverra placerat.

If we added another ⅓ wide card, it would move to the next row.

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

See below for more examples

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

See below for more examples

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

See below for more examples

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

See below for more examples

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

This is an example of a full width (100%) horizontal tile

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

The maximum amount of cards per row is four, and each one needs to be a ¼ width. You can choose between three diferent types of button — or whether to display a button at all.

¼ width are narrow columns

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

Example of a ¼ width

Phasellus mattis sem sit amet elementum tempor. Phasellus consectetur sem dictum viverra placerat.

See below for more examples

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

See below for more examples

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet.

This is an example of a full width (100%) tile

Donec eleifend suscipit arcu, bibendum blandit sem porttitor vitae. Pellentesque lacinia auctor sapien, id faucibus enim placerat sit amet. Vestibulum id nisl hendrerit, semper justo sed, pellentesque ex. Phasellus mattis sem sit amet elementum tempor. Phasellus consectetur sem dictum viverra placerat.