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:
Yes
Reserved block class:
listing
Resources:
css/components/search-box.css if search is enabled
css/components/drop-down.css
css/components/listing.css
js/components/drop-down.js
js/components/list.js
js/components/listing.js
If Card type is Team card:
css/components/team-card.css
If Card type is Content card:
css/components/content-card.css
js/components/content-card.js
If Card type is Cover card:
css/components/cover-card.css
If Card type is Rich text:
css/components/listing-rich-text.css

Quick page editor demo:

Notes

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:

#filter=online-marketing,guide

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:

#list=list1&filter=online-marketing,guide

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:

#list=list1&filter=online-marketing,guide&scroll=list1Top

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:

/case-studies#filter=startup,healthcare