Property page blocks

The listing detail page is composed of atomic blocks the visitor’s chosen listing flows into — each block auto-targets whichever home is open, and each hides itself when that listing has no data for it. The default arrangement is the Barbican Property Page pattern; below is every block it contains, with its CSS hooks.

Gallery · barbican/property-gallery

The photo gallery and full-screen lightbox.

Class	Targets
barbican-gallery	The gallery
barbican-gallery-lead	The lead photo
barbican-gallery-thumb	A thumbnail
barbican-lightbox	The full-screen photo lightbox

Headline · barbican/property-headline

The price, address, and key specs — the page’s H1. It reuses the listing card’s per-field toggles (beds, baths, area, price-drop, chips).

Class	Targets
barbican-listing-head	The headline section
barbican-listing-headline	The price (the H1)
barbican-listing-address	The address line
barbican-listing-headspecs	The beds / baths / area row

Map · barbican/property-map

The location map.

Class	Targets
barbican-map	The map

Open house · barbican/property-openhouse

The open-house invitation, when one is scheduled.

Class	Targets
barbican-openhouse	The open-house invitation

Description · barbican/property-remarks

The public remarks.

Class	Targets
barbican-property-remarks__paragraph	One description paragraph

Rooms · barbican/property-rooms

The room-by-room grid.

Class	Targets
barbican-rooms__grid	The rooms grid
barbican-rooms__card	One room card
barbican-rooms__icon	A room’s type icon
barbican-rooms__name	A room’s name
barbican-rooms__level	A room’s level pill
barbican-rooms__size	A room’s dimensions · area line
barbican-rooms__feature	A room’s feature chip
barbican-rooms__total	The “N rooms total” count beside the header

Unit types · barbican/property-unit-types

For multi-unit listings, a card per unit type.

Class	Targets
barbican-unit-types__grid	The unit-types grid
barbican-unit-types__card	One unit-type card
barbican-unit-types__name	A unit type’s name
barbican-unit-types__units	A unit type’s “N units” pill
barbican-unit-types__spec	A beds · baths · garage spec
barbican-unit-types__rent	A unit type’s rent
barbican-unit-types__total	The “N units total” count beside the header

Green verification · barbican/property-green-verification

Green / energy certifications, including the A→G energy-label scale for letter-grade ratings.

Class	Targets
barbican-green__grid	The certifications grid
barbican-green__card	One certification card
barbican-green__name	A certification’s type
barbican-green__year	A certification’s year pill
barbican-green__body	The certifying body
barbican-green__scale	The A→G energy-label scale
barbican-green__scale-track	The scale’s gradient track
barbican-green__scale-marker	The grade marker
barbican-green__rating	A rating badge (non-letter ratings)
barbican-green__status	A status pill
barbican-green__link	A certificate link

Green features · barbican/property-green-features

Categorised green features.

Class	Targets
barbican-green-features__grid	The features grid
barbican-green-features__card	One category card
barbican-green-features__icon	A category’s icon
barbican-green-features__label	A category’s label
barbican-green-features__chip	One feature chip

Power production · barbican/property-power-production

Solar and other on-site power systems.

Class	Targets
barbican-power__grid	The systems grid
barbican-power__card	One system card
barbican-power__name	A system’s type
barbican-power__year	A system’s install-year pill
barbican-power__spec	A capacity · output spec
barbican-power__feature	A system’s ownership chip

Spec · barbican/property-spec

The composable spec section — the customer-curated field set, grouped and searchable. It uses the shared grouped-spec hooks (the same vocabulary as the Profile fields).

Class	Targets
barbican-spec	The spec section
barbican-spec-head	The eyebrow + field-search row
barbican-spec-group	An L1 group
barbican-spec-grid	A group’s grid
barbican-spec-fact	One field row
barbican-fieldinfo	A field’s “ⓘ” description popover

Contact · barbican/property-contact

The “Want to see it?” card.

Class	Targets
barbican-contact-strip	The contact card

Breadcrumbs & the showing scheduler

The page also opens with barbican/breadcrumbs and can end with the showing scheduler (barbican/property-showings). The scheduler is rendered by the Showings feature and is styled through that feature’s own markup, not the hooks above.