CMS Filter + Reset

Description

Drop your Collection List and filter buttons into the two component slots. Add a custom attribute to each Collection Item bound to your CMS category field and the component handles the filtering automatically.

Sort items on load by any CMS field. Click a card to open a detail modal.

Useful info

Your Collection List goes in one slot, your filter buttons in another. Add a data-filter-value attribute to each Collection Item — bound to your CMS field — and the component matches it against the data-filter attribute on your tabs. No hidden text elements, no auto-generated buttons.

Custom filter buttons

Filter buttons are built by you in Webflow and dropped into the Filter Tabs slot. Style them however you want. The component reads the data-filter attribute on each button and matches it against the collection — nothing is injected or generated at runtime.

Sort on load

Add a data-sort-value attribute on each Collection Item, bound to any CMS number or text field. Items are reordered in the DOM before any filtering starts — numeric or alphabetic, ascending or descending.

Card modal

Optionally let users click a card to open a detail modal. Build a hidden panel inside each card with CMS-bound content, add a fixed overlay div anywhere on the page, and enter the class names. The component handles open, close, and animation.