Listings carousel

A full-bleed band of cards that bleeds off the edge.

A full-bleed band: prose and a CTA on the left, an Embla-powered row of listing cards that bleeds off the right edge (ADR 0011). Drag or scroll; tab into a card and it scrolls into view. The progress bar stands in for a scrollbar.

The one carousel exempt from the composite keyboard model.Everywhere else — the photo strip, MediaCarousel, the Gallery ribbon — a carousel is one composite with one tab stop and ←/→ inside it (ADR 0024, 0026, 0030). This row is not: its slides are whole listing cards, each an independent link, so collapsing them into one stop would hide every destination behind an arrow key. Tabbing moves card to card and the track follows.

Tone-agnostic — re-tone the preview and the pills follow (ADR 0013). Inside this row a card's own photo strip does not drag: the row is itself an x-axis Embla and the row wins. The arrows and ←/→ still page the photos.

In a dark band

Tone

Props

packages/primitives/src/ListingsCarousel.astro
PropTypeRequired
headingstringyes
bodystring
ctaHrefstringyes
ctaLabelstringyes
listingsCarouselListing[]yes
headingLevel1 | 2 | 3 | 4 | 5 | 6
listLabel

aria-label for the list of cards (the heading already gives context).

string
CarouselListing — referenced by a prop above
FieldTypeRequired
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"
statusLabelstring
isNewboolean
newLabelstring
priceLabelstring
kindLabelstring
descriptionstring
addressstringyes
addressSecondarystring
areaLabelstring
roomsLabelstring
depositLabelstring
readMoreLabelstring
hrefstring