listing
css/components/search-box.css
if search is enabledcss/components/drop-down.css
css/components/listing.css
js/components/drop-down.js
js/components/list.js
js/components/listing.js
css/components/team-card.css
css/components/content-card.css
js/components/content-card.js
css/components/cover-card.css
css/components/listing-rich-text.css
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:
When adding categories to your cards later, you can however add spaces to include multiple categories:
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:
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