Library · Content Sections

Property / Location & Amenities

Lazy-loaded embedded map beside a categorised list of nearby amenities (schools, transport, shopping). The POI list is server-rendered and usable even if the map fails to load. Tone via the shared contract.

Figma: Property / Location & Amenities ↗

Live preview — edit theme bottom-right

---
import PropertyLocationAmenities from "../components/figma/PropertyLocationAmenities.astro";
---
<PropertyLocationAmenities
  heading="A connected location"
  intro="Everything you need, minutes from your door."
  mapEmbedSrc="https://www.openstreetmap.org/export/embed.html?bbox=153.02%2C-27.48%2C153.04%2C-27.46&layer=mapnik"
  mapTitle="Map of the development location"
  tone="base-100"
  pois={[
    { category: "Schools", name: "Riverside State School", distance: "600m" },
    { category: "Schools", name: "St Mary's College", distance: "1.2km" },
    { category: "Transport", name: "Ferry terminal", distance: "400m" },
    { category: "Transport", name: "Train station", distance: "900m" },
    { category: "Shopping", name: "Central Markets", distance: "750m" },
    { category: "Shopping", name: "Riverside Plaza", distance: "1.5km" },
  ]}
/>

Props

Name	Type	Required	Description
`heading`	`string;`	—	Optional heading
`intro`	`string;`	—	Optional intro
`mapEmbedSrc`	`string;`	Yes	Map embed URL (e.g. a Google Maps embed src)
`mapTitle`	`string;`	—	Accessible title for the map iframe (default: 'Map of the location')
`pois`	`Poi[];`	Yes	Nearby points of interest
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<PropertyLocationAmenities
  heading="A connected location"
  mapEmbedSrc="https://www.google.com/maps/embed?pb=..."
  pois={[
    { category: "Schools", name: "Riverside State School", distance: "600m" },
    { category: "Transport", name: "Ferry terminal", distance: "400m" },
  ]}
/>