Universal / LIVE LAB
Back to SnippetsFilterable project card grid — HTML, CSS, and vanilla JavaScript
A responsive project grid with text search, category buttons, result counts, an honest empty state, keyboard focus, and reduced-motion support.
HTMLCSSJavaScript
Receipt: six cards, three filters, zero dependencies.
What this is
Add useful search and category filters without a framework or dependency.
Use this when a portfolio, resource library, team directory, or small catalog has enough cards that browsing needs help—but not enough complexity to justify a framework.
The complete demo is intentionally ordinary web code. Paste the three files into CodePen, a static site, a CMS template, or your existing project and replace the sample content.
Use it
- Paste the HTML into your page and keep the `data-*` hooks on filters and cards.
- Add the CSS after your reset or component layer, then change the colors and breakpoints.
- Load the JavaScript with `defer` or place it immediately before the closing body tag.
- Test search, every category, the zero-result state, keyboard focus, and a mobile width.
Make it yours
- Replace each card title, category, description, and destination link.
- Change the `data-category` values and matching filter buttons for your own taxonomy.
- Adjust the grid breakpoints, signal color, border color, and card minimum height in CSS.
- Remove text search or category filtering independently; the remaining control still works.
Reuse contract
Supported environments
- Current Chrome, Edge, Firefox, and Safari
- No framework or build step required
Security notes
- The demo makes no network requests and has no third-party dependencies.
- Filtering reads static data attributes and writes result text through `textContent`; it does not inject HTML.
- If card data later comes from users or an API, validate URLs and render untrusted text with `textContent`.
Loading the isolated live lab…