Listing Listing icon

Act3 Listing preview

Use case:
Multi-filterable and searchable list of cards, great for your resources library or where the content is abundant and requires organizing in categories that are easy to navigate through for users.
Page speed impact:
The component itself has a low impact, but depending on the number and size of the images, especially in the above the fold, may have a medium or even high impact.
Use TinyPNG to optimize your images as best as possible without losing in quality, or consider using vector images (SVG) whenever possible, which are usually very little in size compared to JPG or PNG files.
Available in pages:
Reserved block class:
css/components/search-box.css if search is enabled
If Card type is Team card:
If Card type is Content card:
If Card type is Cover card:
If Card type is Rich text:

Quick page editor demo:


You can see this module in action and make an idea on how the filters and categories are added by creating a test page with the Resources template, which is already populated with multi-filters and sample cards.

When defining your filters please make sure the categories don't contain blank spaces or special characters, except letters, numbers, underscores or hyphens:

Act3 Listing module - Bad vs Good filter category

When adding categories to your cards later, you can however add spaces to include multiple categories:

Act3 - Listing module - Card multiple categories example

Filtering listings with #hash

Starting with Version 12 you can filter the content of your listings using the URL hash property. That comes in handy if you want to link to certain filtered lists from the same or external page (e.g, from the menu).

You can do that by appending something like this to your URL:


Multiple categories are separated by commas.

If you have multiple Listing modules on your page, you need to add a unique ID to each listing. For example:

Act3 - Listing module - Listing ID field

Then specify it in your URL like this:


If you want the page to scroll to a particular element while filtering with #hash (for example, a Section Intro), you can specify the ID of that element like this:


You can test a live example here and here is an example with multiple listings on the same page.

Also, here is an example of a relative URL, in case you want to link from your menu or another page on your website: