Listing card

v1.0.0·Added in 1.0.0

The ad card of a marketplace: swipeable photos, the price, place and time, badges and a heart, in grid, list and compact layouts.

Tap or click anywhere on the card to open the listing: the title is one link stretched over the whole card, so long-press and middle-click give the native link menu. Swipe the photos sideways on a phone (vertical scrolling always wins, and a swipe never opens the listing); with a mouse, drag them or use the arrows that appear on hover, and the photo zooms in a touch. Tap the heart to save the listing: it pops with a small burst, and rolls back with a shake if saving fails. Keyboard: Tab meets the title link, the photo arrows (they show while the card holds focus) and the heart once each; Left / Right change the photo while focus is on the photo's controls; Enter opens the listing, Space or Enter toggles the heart. Dots under the photo show where you are (at most five, sliding along); a camera chip tells how many photos there are when not all of them are in the card. The first photo is a plain image until you touch, hover or focus it, so a grid of 48 cards stays light; under reduced motion the photo does not zoom.