Card Filter

Searchable, category-aware card collections powered by semantic data attributes. Use it for component browsers, icon galleries, resource directories, and any grid where users need to narrow results quickly.

Live Example

This is the same filtering pattern used in the Axicons browser. Categories are generated from the cards automatically, while search matches card metadata and visible text.

Implementation Notes

Surface code-driven patterns, recipes, and component examples.

Development

Accessibility Reviews

Group guidance for focus, semantics, and keyboard support.

Accessibility

Component Catalog

Let users browse grouped UI patterns without endless scrolling.

Release Assets

Filter downloadable bundles, starter kits, and package references.

Release

Showcase Highlights

Keep featured examples visible while still letting users search deeply.

Media

Delivery Metrics

Highlight performance-focused content like bundle size and shipping paths.

Delivery

<section class="filter" data-component="card-filter">
  <div class="toolbar">
    <label for="card-search">
      <span class="sr">Search cards</span>
      <input id="card-search" type="search" data-filter-search>
    </label>
    <p data-filter-summary aria-live="polite"></p>
  </div>

  <nav class="categories" data-filter-category-nav></nav>

  <div class="grid" data-filter-items>
    <article class="card" data-filter-item data-filter-category="docs|ui" data-filter-search="component docs">
      ...
    </article>
  </div>

  <div class="alert info" data-filter-empty hidden>No matching cards.</div>
</section>

How It Works

Attribute	Purpose	Notes
`data-component="card-filter"`	Initializes the component	Add it to the wrapper element around the search, category nav, and items.
`data-filter-search`	Search input	The component listens for input events and filters cards in real time.
`data-filter-category-nav`	Category chip container	Buttons are generated automatically from the categories found on your cards.
`data-filter-items`	Items container	Point this at the element that contains the filterable cards.
`data-filter-item`	Filterable card marker	Each matching card gets hidden with the native `hidden` attribute when it does not match.
`data-filter-category`	Category key(s)	Use pipe, comma, or whitespace-separated values like `docs\|ui`.
`data-filter-search` on cards	Search metadata	Include extra keywords so searches work even when the exact text is not visible in the card body.
`data-filter-summary` / `data-filter-empty`	Result messaging	Optional helpers for “Showing x of y” copy and empty states.

Best Practices

Keep category keys short and machine-friendly, such as docs, ui, or accessibility.
Use the card body for human-readable labels and data-filter-search for synonyms or related keywords.
Pair the component with Axiom cards so search results remain visually consistent across docs and galleries.
Provide a visible summary and empty state so users always understand why results changed.
For large dynamic datasets, append cards into the data-filter-items container and call Axiom.init() again if needed.

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Card Filter component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.

Accessibility

Axiom01 ensures that the Card Filter component meets strict WCAG standards out of the box:

Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
Focus Management - Visible, high-contrast focus indicators without layout shifting.
Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.