# Filter chips product list > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A category listing page for a fictional outdoor-gear shop ("Fjell"). A sticky header holds the title, a live item count, a horizontally scrolling row of filter chips and a round sort button. Below is a two-column card grid: tinted product image with an optional SALE badge, a heart button, name, meta line, price (with struck original on sale) and a rating. Changing a chip or sort swaps the grid for four shimmering skeleton cards for 550ms, then fades the real cards in two at a time. The chip that is worth copying: selecting it fills it dark and a 16px check icon animates its width from 0, so the chip visibly grows rather than snapping. ## Reference behaviour 1. Initial state: "All" chip pressed, sort "Featured", 8 items in a 2-column grid, the "Bre 38L pack" heart already filled. Sheet and scrim hidden. 2. Tap a chip (e.g. "Boots"): the previously pressed chip loses its fill; the tapped chip animates background `--surface → --chip-on`, text to `--chip-on-ink`, and its check icon grows from 0 to 16px wide with a 6px right margin over 160ms. The chip scrolls into view if partially clipped. The grid is replaced by 4 skeleton cards (`aria-busy="true"`), and 550ms later the filtered cards render with a 6px rise + fade over 300ms; even-numbered cards start 40ms later. The item count updates ("2 items"). 3. "Sale" filters to items with a sale price; the empty state ("Nothing here yet") spans both columns if a filter yields nothing. 4. Tap the sort button: a scrim fades to 45% over 300ms and a bottom sheet slides up from below the 80px reserve over 380ms with the iOS-sheet easing. Focus moves to the checked option. 5. Tap an option: its check icon scales from .6 to 1 and fades in; the sheet closes; the grid re-skeletons and re-renders sorted. A 7px orange dot appears on the sort button while the sort is not "Featured". 6. Tap the scrim or press Escape: the sheet closes and focus returns to the sort button. 7. Tap a heart: it fills `--accent`, the stroke turns `--accent` and the icon pops (`scale .7 → 1.25 → 1`) over 300ms. Tapping again empties it. Wishlist state survives filter changes. 8. Scroll the list: the header (title + chips) stays stuck at the top. ## Structure ``` 390 × 844 (54px status reserve above, 80px browser bar below) ┌──────────────────────────────────────┐ │ Shell jackets & more 8 items │ sticky header (bg), h1 26px │ [(ok) All][Jackets][Boots][Packs][Ten…] ((=)) │ 40px chips · 40px sort btn ├──────────────────────────────────────┤ │ ┌────────────┐ ┌────────────┐ │ 2 cols, 12 gap, 16 gutter │ │ SALE (heart) │ │ (heart) │ │ image 1:1.1, tint + curve │ │ │ │ │ │ │ ├────────────┤ ├────────────┤ │ │ │ Ridge 3L… │ │ Kvist down…│ │ name 14/600 │ │ Jackets·412│ │ Jackets·187│ │ meta 12 │ │ £289 (star)4.8 │ │ £299 £349 │ │ price 15 Syne / rating │ └────────────┘ └────────────┘ │ │ ┌────────────┐ ┌────────────┐ │ │ … │ ├──────────────────────────────────────┤ │ ▲ sheet (on demand), bottom: 80px │ │ ── grab ── │ │ Sort by │ 18px Syne │ Featured (ok) │ 52px rows │ Price: low to high │ │ Price: high to low │ │ Top rated │ └──────────────────────────────────────┘ ``` - `
` — `position: sticky; top: 0`, `margin-top: 54px`; `.title` row (`

`, `.count[aria-live=polite]`) and `.tools` row (`.chips[role=group]` of `