A container that layouts its items using masonry algorithm.

It implements foundation-selections and foundation-mode vocabulary.

Note that if pagination is configured, this component needs to have a parent with a height and scrollable, such as:

It has the following content structure:

  1. granite:commonAttrs
  2. granite:renderCondition
  3. granite:container
  1. fixed-spread
  1. fixed-spread
  2. fixed-centered
  3. variable
  4. dashboard

The algorithm to layout the items:

Layout with fixed width and evenly spread items
Layout with fixed width centered items
Layout with variable width items
Layout with variable width items which are expanded in their height to fill gaps
  1. 242

The width of the column.

  1. 15

The spacing between the items and the masonry container in pixel.


true to initially display it in selection mode; false otherwise. In the selection mode, clicking the item selects it, instead of triggering the default behaviour of the item.


true to make the items orderable per drag and drop; false otherwise.

  1. multiple

The count of item to be selected (when the selectionMode is enabled):

Only maximum single selection allowed
Zero or more selection allowed

The URI Template that is returning the HTML response of the masonry. It is used when the client needs to load data dynamically, such as pagination.

If it is not specified, the feature is disabled.

It supports the following variables:

The item offset of the current request.
The item limit of the pagination.
The id of the collection ([data-foundation-collection-id]).

e.g. /a/b/c{.offset,limit}.html{+id}


The path of the current collection. It will act as the value of [data-foundation-collection-id].

e.g. ${requestPathInfo.suffix}


The resource type for each item of the column.

  1. 20

The item limit of the pagination.


Indicates the size of the items from datasource to be included. If this property is not specified, then all items from datasource will be included, and the next page will be fetched accordingly.

This is meant to be a performance optimization to avoid fetching the next page unnecessarily. For example given the fact that the size is set to 20, and the datasource is configured to fetch size + 1, which is 21, the implementation can check if the datasource actually has more item or not just by checking its size.


When size is set, you have to make sure your datasource is configured to fetch more than the value of size!

size Actual DS Size Has More?
20 < 20 false
20 = 20 false
20 > 20 true
(not set) n/a true

The path to the resource to render .foundation-collection-meta. If not specified, the resource specified at path will be used instead.

The resource will be included using resource type specified at metaResourceType, where it can be processed accordingly.


The resource type to render .foundation-collection-meta.

The resource specified at metaPath or path will be included using this resource type, where it can be processed accordingly.

This property is mandatory to specified if .foundation-collection-meta needs to be generated.


The value of [data-foundation-mode-group] this component participates.

The component supports the default or selection mode.

When there is a selection, it will trigger the foundation-mode-change event with mode = selection, while triggering the event with mode = default when there is no selection.

When other component triggers the event, when mode = default, it will clear the selection and change itself into a default mode, while for mode = selection, it will change itself into a selection mode.


The URI Template handling the POST request to reorder the item. It supports the following variables:

The id of the reordered item. ([data-foundation-collection-item-id])
The id of the reference item. The item is ordered before this reference item. ([data-foundation-collection-item-id])

The name of the before item: var beforeName = before.substring(before.lastIndexOf(“/”) + 1);.

This is meant for convenience for Sling POST Servlet’s :order parameter, which requires the node name (instead of path).

The final URL (after URI Template expansion) is converted to application/x-www-form-urlencoded content type. For example if we have URI Template of /reorder{?item,before} which is expanded into /reorder?item=%2Fcontent%2Fde&before=%2Fcontent%2Fen, the POST would be against /reorder with item=%2Fcontent%2Fde&before=%2Fcontent%2Fen as the request body.


This property is the equivalence of itemReorderAction for absolute path.

For example if your template is {+item}?order{&before}, since it is not starting with “/”, the server is unable to know if it is an absolute path. So use this property if you want to add the context path regardless.

  1. true

true to automatically render <coral-masonry-item> and thus the item resource is rendering the content (e.g. a <coral-card>).

false to make the item resource itself responsible to render <coral-masonry-item>. This would allow arbitrary attribute to be added to the element.


false to show the empty message (or render the empty item using emptyitem subresource) when there is no item; true to skip showing that message.


The component to render the item to represent an “empty item” when there is no item.

Navigating the Item

For navigation when clicking the item, .foundation-collection-navigator can be specified at the item element (or its descendant). It supports navigating to arbitrary location (just like <a>), or navigating to the collection item. An example if the item is <coral-card>:

<coral-card class="foundation-collection-navigator"></coral-card>

Card Markup

<coral-card> is usually used as the item of masonry.

For the thumbnail of the card, it is recommended to use maximum 480w x 800h dimensions.

<coral-card image="/content/geometrixx_mobile.thumb.800.480.png?ck=1447060146"></coral-card>

Indicating foundation-collection-action Relationship

To indicate the [data-foundation-collection-quickactions-rel] that is used to match the foundation-collection-action (in the toolbar), you should prepare a <meta> holding the information:

<meta class="foundation-collection-quickactions" data-foundation-collection-quickactions-rel="<put value here>">

You can put it as a child of <coral-card>.

Adding Quickactions to the Card

To add quickactions, you need to add <coral-quickactions> after the <coral-card> and specify the target attribute of <coral-quickactions> to point to the card.

Replacement for <a> in Quickactions

Since the markup now is required to be <coral-quickactions-item>, you cannot use <a> anymore. To replace it, you can use foundation-anchor:

<coral-quickactions-item icon="infoCircle" class="foundation-anchor" data-foundation-anchor-href="/libs/wcm/core/content/sites/properties.html/content/geometrixx-outdoors">Properties</coral-quickactions-item>

Quickactions Item to Select the Card

For Shell3, there is a need to have a button in the quickactions to select the item/card. To do this, you can use foundation-collection-item-activator to annotate the button:

  <coral-quickactions-item class="foundation-collection-item-activator" icon="check">Select</coral-quickactions-item>


  <!-- ... -->
  <meta class="foundation-collection-quickactions" data-foundation-collection-quickactions-rel="cq-siteadmin-admin-actions-create-activator cq-siteadmin-admin-actions-copy-activator">
<coral-quickactions target="_prev" alignMy="left top" alignAt="left top">
  <coral-quickactions-item icon="infoCircle" class="foundation-anchor" data-foundation-anchor-href="/libs/wcm/core/content/sites/properties.html/content/geometrixx-outdoors">Properties</coral-quickactions-item>
  <coral-quickactions-item icon="copy" class="foundation-collection-action" data-foundation-collection-action='{"action": "cq.wcm.copy"}'>Copy</coral-quickactions-item>


+ mymasonry
  - sling:resourceType = "granite/ui/components/coral/foundation/masonry"
  - src = "/a/b/c{.offset,limit}.html"
  + datasource
    - sling:resourceType = "my/datasource"