Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
Listings grid
The browse-all grid, with subgrid band alignment.
A responsive grid of listing cards whose bands line up across the row via subgrid (ADR 0015): header bands share a height so the photos start on a common line, promo flags and prices each land on their own line, and footers share a baseline — with no clamped line counts and no measured heights. Note the varied address and description lengths below; the cards still align.
The alignment contract lives only here. The card stays parent-agnostic: it is handed its row tracks through --listing-card-rows rather than out-specified, because an Astro scoped style is unlayered and would beat any layered rule whatever its specificity. A custom property has no such fight, and it states the contract outright.
A real list (ul/li), one tab stop per card. This is the static "browse all" surface; the carousel shares the same band alignment on the other axis.
Alignment across a row
- 1 / 12New8.400 kr/md.LejlighedAvailable
- 1 / 1Open houseReserved11.200 kr/md.RækkehusReserved
Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.
- 1 / 5Open houseNewComing soon
Strandgade 7, 1.5000 Odense C
6.950 kr/md.LejlighedComing soonWorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.
- 1 / 2Let
Bredgade 44, 3.5200 Odense V
9.500 kr/md.LejlighedLetWorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.
- 1 / 1Coming soon
Havnegade 21, 4.5000 Odense C
7.800 kr/md.LejlighedAvailable from 1 Dec 2026Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.
- 1 / 12New8.400 kr/md.LejlighedAvailable
Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
- 1 / 1Open houseReserved11.200 kr/md.RækkehusReserved
Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.
- 1 / 5Open houseNewComing soon
Strandgade 7, 1.5000 Odense C
6.950 kr/md.LejlighedComing soonWorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.
- 1 / 2Let
Bredgade 44, 3.5200 Odense V
9.500 kr/md.LejlighedLetWorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.
- 1 / 1Coming soon
Havnegade 21, 4.5000 Odense C
7.800 kr/md.LejlighedAvailable from 1 Dec 2026Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.
Props
| Prop | Type | Required |
|---|---|---|
| listings | GridListing[] | yes |
| listLabel aria-label for the list of cards (a nearby heading gives the context). | string | — |
| headingLevel Heading level for each card's title — set from the page's heading outline. | 1 | 2 | 3 | 4 | 5 | 6 | — |
| Field | Type | Required |
|---|---|---|
| kind | "unit" | "property" | — |
| 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 | — |
| availabilityLabel | string | — |
| isNew | boolean | — |
| newLabel | string | — |
| openHouse | boolean | — |
| openHouseLabel | string | — |
| priceLabel | string | — |
| kindLabel | string | — |
| description | string | — |
| address | string | yes |
| addressSecondary | string | — |
| areaLabel | string | — |
| roomsLabel | string | — |
| depositLabel | string | — |
| readMoreLabel | string | — |
| href | string | — |