1 / 1
Available
A development close to services, transport and green space.
Properties browser
The filtered development grid, region and type.
The block on the properties page — the site's main browse surface (ADR 0022). Two rows of filter chips (by type, by region), each a toggle<button aria-pressed> carrying a count, above a subgrid grid of available ListingCard kind="property" cards, with a livearia-live result count and an empty state.
Filtering is progressive enhancement. With no JavaScript every card shows — a filter that silently hides the catalogue when a script fails is worse than no filter. The swap-safe script (ADR 0017) filters two independent single-select axes, type AND region, and a filtered-out cell drops out of layoutand the accessibility tree via[hidden], rather than being merely invisible.
The chip counts are derived from the set the grid renders, so they cannot drift from it. The fixture here computes them the same way, which is why clicking through reaches both a one-result count and the empty state without anyone maintaining a number.
It uses the ListingsGrid alignment contract but keeps its own markup, because it owns the cells it filters. Not a search: this is chip filtering, and there is no free-text box.
Two filter axes
8 developments
- 1 / 2Available
A development close to services, transport and green space.
- 1 / 3Available
A development close to services, transport and green space.
- 1 / 4Reserved
A development close to services, transport and green space.
- 1 / 1Available
A development close to services, transport and green space.
- 1 / 2Available
A development close to services, transport and green space.
- 1 / 3Available
A development close to services, transport and green space.
- 1 / 4Let
A development close to services, transport and green space.
No developments match those filters.
Props
| Prop | Type | Required |
|---|---|---|
| properties | PropertyCard[] | yes |
| typeFilters | Facet[] | yes |
| regionFilters | Facet[] | yes |
| listLabel aria-label for the grid's list of cards. | string | yes |
| allLabel Chip label for the "no filter" option in each group. | string | yes |
| filterTypeLabel Accessible names for the two filter rows. | string | yes |
| filterRegionLabel | string | yes |
| countLabelOne Live result count templates (each holds a "{count}" placeholder). | string | yes |
| countLabelOther | string | yes |
| emptyLabel Shown when a filter combination matches nothing. | string | yes |
| cardHeadingLevel Heading level for each card's title. | 1 | 2 | 3 | 4 | 5 | 6 | — |
| Field | Type | Required |
|---|---|---|
| key | string | yes |
| label | string | yes |
| count | number | yes |
| Field | Type | Required |
|---|---|---|
| images The home's photos (ADR 0030): one still, or a pageable strip. | { src: string; alt?: string }[] | yes |
| availability | "available" | "reserved" | "let" | "coming-soon" | — |
| statusLabel | string | — |
| address | string | yes |
| addressSecondary | string | yes |
| description | string | — |
| areaLabel | string | yes |
| roomsLabel | string | yes |
| readMoreLabel | string | yes |
| href | string | — |
| regionKey | string | yes |
| typeKeys | string[] | yes |