Product Archive
Figma Component: tbd
Last modified with commit 605fa9d on
by Sara Deric.
The Product Archive component displays a filterable and sortable list or grid of products or experiences. Shows product cards with images, titles, key information, and links to detail pages.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display products grid | Shows products in grid layout. Number of columns adjusts based on viewport size. |
| system | Display filter controls | Shows category filter buttons or dropdown and optional search input above product grid. |
| system | Filter and sort products | Filters products based on selected categories or search query. |
| editor | Configure display options | Set number of products per page, default sorting order, and visible filter categories. |
| user | Filter products | Click category filter to show only products in that category. Multiple filters can be applied. |
| user | Click product card | Navigates to product detail page. Card shows hover state on hover. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |