Vanilla framework documentation


The matrix pattern can be useful to display a selection of items in a format that is less linear than a normal list, using an image to describe each item.

Matrix items will display in one column on small screens. At resolutions above $breakpoint-medium, the matrix switches to three items per row.

View example of the matrix pattern

Note: for the Matrix pattern to display correctly on large screens, you'll need to add list items in a multiple of three. If you do not have content for all the items, leave them empty but the list item must be present.