Listing card

A Listing rendered as a card, in the brand layout (ADR 0014): the photo leads, then a mint garden-tone band (name + address) reading as its caption, then the body — price, the kind line, and the specs. Availability sits on the kind line, separated and colour-coded by a single dot (one per state, ADR 0010) rather than carried in a chip of its own. The label is free copy, so a state word and a date read the same way (last card). Presentational: all strings are pre-localized by the caller.

Chips sit on the photo, in two independent corners:Open house top-left, and the New flag with the Availability state stacked under it top-right. Each carries its own solid fill, so text contrast is against the chip rather than whatever the photo happens to be (ADR 0007), and each corner is its own stack — an empty corner occupies nothing. Availability shows for every state except available: a chip on every card is noise, and the kind line still says the state in words. The midline holds the photo arrows; bottom-right is still reserved, not built, for an "AI enhanced" chip.

The photo strip (ADR 0030). The card takesimages, and the data decides — not kind: more than one photo adds prev/next arrows, a 3 / 12 counter bottom-left, swipe and mouse-drag; one photo is the plain still it always was. The second and fourth cards below have a single photo on purpose, so both shapes sit in one grid. Only slide one is in the markup — the rest ride in an inert <template> the browser never fetches, cloned in on first intent (hover or focus with a mouse, anIntersectionObserver on touch, which has no hover to wait for). Move a mouse over a card to see the arrows: they hide on(hover: hover) and (pointer: fine) and stay visible on anything else. The card is still one tab stop — tab to it and page the photos with ←/→. The strip loops, unlike the MediaCarousel and Gallery stages: an arrow that hid itself at the end would uncover the photo's own link right where the cursor was about to press, so the last photo opened the listing instead of wrapping.

Whole-card availability. Two of the four states paint the card itself, at two strengths, from data-status on the root — so a grid reads before any label does. Reserved recolours the caption band to the reserved status pair (held, not gone; nothing else changes). Let takes the muted neutral pair anddesaturates the photo — the card retires. Available and Coming soon are deliberately untouched: available is the default, and dimming a coming-soon home would say the opposite of what it means. Only the ADR 0010 token pairs are reassigned, never raw colours, which is why re-toning the preview below keeps every state legible — including garden, where the band is not mint but the teal dark surface.

The unit kind

The property kind

kind="property": a development or building shown with general info — area and rooms ranges and a read-more cue, no single price, type or deposit (CONTEXT.md). Same component, varies by kind; we do not keep a separate PropertyCard. Passed a statusLabel it carries a filled status pill (ADR 0022) instead of the unit kind's inline dot. The third card is let, so the whole-card treatment shows on the property shape too.