← Overview

filterList

Filters a card grid that is already in the page — by what you type, by the facets you tick, and out loud.

Four filters, one component. What you see is this page's own CSS reacting to a single attribute — data-filterlist-state — and to hidden. What you cannot see is the half that matters: a polite live region in every one of them, saying in words how many cards are left.

1 — A search field over a card grid

data-filterlist-query on the field, data-filterlist-item on each card, and nothing else. The haystack is the card's own visible text, so “rebuilding” finds the card whose blurb says it — example 2 shows how to narrow that down.

  • Amelie Roth

    Interface design

    Joined in 2019 and has been rebuilding the design system since.

  • Jonas Weber

    Accessibility

    Runs the audits and writes most of the test fixtures.

  • Léa Bernard

    Interface design

    Draws the components nobody else wants to draw twice.

  • Tomás Silva

    Front-end engineering

    Keeps the build honest and the bundles small.

2 — Facets, a reset, and word matching

A <select> and a checkbox group, each control's value matched against the card's data-filterlist-tags: OR inside a group, AND across groups. The cards carry data-filterlist-text, so the search runs on the name, the role and the city and not on the blurb, and data-filterlist-match="word" narrows a term to the start of a word: des finds design, sign no longer does. Try zurich — it finds Zürich.

  • Amelie Roth

    Interface design · Berlin

    Holds the contract between the design system and the build.

  • Tomás Silva

    Front-end engineering · Lisbon

    Keeps the build honest and the bundles small.

  • Nadia Frei

    Research · Zürich

    Runs the usability sessions and writes them up.

  • Léa Bernard

    Interface design · Zürich

    Draws the components nobody else wants to draw twice.

  • Jonas Weber

    Accessibility · Berlin

    Runs the audits and writes most of the test fixtures.

3 — Cards that arrive later

The button under the grid is this page's own script appending plain markup — no module involved, nothing re-initialised. A MutationObserver re-indexes the region, so filter first and then load: the cards arriving obey the query that is already in the field. Custom wording here too — data-filterlist-count-text for the number you can see.

  • Brand manual

    PDF · 4.2 MB

  • Logo pack

    ZIP · 12 MB

  • Type specimen

    PDF · 1.1 MB

4 — A filter bar you never see

Below this paragraph is a region with a complete filter bar and no items in it. The module reported that and left the bar with the hidden attribute it was authored with, so there is nothing on screen and nothing to press. Read the console — and note that this is the same mechanism as the progressive enhancement above, not a second one.

The list this bar would filter is not here yet.