Xiaomi Redmi Note 12 Pro
Charger included
Portland, Downtown, 2.2 km away
Commerce
v1.0.0Added in 1.0.0
The body of a results page: count, sort, view switch and filter chips over a listing grid that loads more as you scroll.
Scroll the results and the next batch loads before you reach the end, rising in with a short stagger; the "Show 24 more" button under the grid does the same by click, tap, Enter or Space, and says how many are left. The header gives the count, the sort (a menu on desktop, a bottom sheet on phones), the grid / list switch (a segmented control on wide headers, one toggle button on phones) and a bell to save the search; applied filters sit under it as chips you remove with their × (they scroll sideways on phones), with "Clear filters" at the end. On a phone the grid is two columns of small cards and the promoted block is a rail you swipe; each card is one Tab stop plus its heart. Sorting swaps the list without animation and scrolls the header back into view; switching the view cross-fades the list once. New batches, sort and view changes are announced to screen readers. While loading, skeletons with the cards' shape hold the place; with no results an empty state offers "Clear filters", and an error offers "Try again".
npx wingo-ui@latest add listing-gridPro item: the CLI needs a Pro account. See plans
Northwind Market · All categories
router: /listings/portland · sort newest · view grid · 24/1240 loaded · hasMore true · cards auto · loadMode auto · view key none · animateIn true · sticky false · skeletons 8 · total live 1240 · favorite: none yet
Scroll to load more; remove a chip or sort to get a new set; tap a card to open it