Squares Panels

The squares panel displays its article heading and summary in the same way as standard article panels, followed by a series of squares, each of which is designed to display an image.

Each row in the panel is optimised to display four squares. There is no maximum number of items that can be added as squares in the panel, with squares automatically organised into a grid four squares wide.

On mouseover a square in the panel reveals the heading and summary of the article that is providing content for that square. The whole square, including the image, acts as a link to the article.

At mobile widths the squares turn into a carousel.

Creating Squares Panels

To create a squares panel, relate the "squares" metadata value to a default article. This article will become a panel that displays the articles related to it in squares.

Relate an image to each square article.

Squares display their article heading and summary. Take care over the length of the introductory/summary text as space is limited and very long text will affect the appearance of the squares.

Relate the article with the "squares" metadata to an article that uses the Panel template.