Library · Listings & Cards

Project Spotlight Cards

Grid of development projects — cover image, status badge, name, locality and links to the project's content hub and campaign site. Supports a dashed 'future project' placeholder card showing how the next project slots into the same template.

Live preview — edit theme bottom-right 
---
import ProjectSpotlightCards from "../components/figma/ProjectSpotlightCards.astro";

const projects = [
  {
    name: "One Redcliffe",
    suburb: "Redcliffe",
    region: "Moreton Bay",
    status: "Under construction",
    statusType: "info" as const,
    summary: "One, two, three and four-bedroom waterfront apartments across two towers.",
    href: "#",
    externalHref: "#",
    externalLabel: "Enquire on the project site",
    image: "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=800&h=600&fit=crop",
    imageAlt: "Waterfront apartment development",
  },
  {
    name: "Bronze on Chevron",
    suburb: "Chevron Island",
    region: "Gold Coast",
    status: "Coming soon",
    statusType: "warning" as const,
    summary: "Island living a bridge from Surfers Paradise.",
    href: "#",
    externalHref: "#",
    image: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&h=600&fit=crop",
    imageAlt: "Apartment exterior",
  },
  {
    name: "Future project",
    placeholder: true,
    summary: "The next development slots into the same template — reskinned, not rebuilt.",
  },
];
---

<ProjectSpotlightCards
  eyebrow="Gardner Vaughan Group"
  title="Our communities"
  intro="Every development we build, and the stories behind them."
  columns={3}
  projects={projects}
  tone="base-200"
/>

Props

NameTypeRequiredDescription
projects SpotlightProject[] Yes Projects to spotlight
title string — Section heading
eyebrow string — Small line above the heading
intro string — Short paragraph under the heading
columns 2 | 3 | 4 — Grid column count (default: 3)
externalLabel string — Default label for the campaign-site link
level 'h2' | 'h3' — Semantic heading level (default: 'h2')
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral" — Background tone — the Figma colour-variant axis

Example with all props

<ProjectSpotlightCards
  title="Our communities"
  columns={3}
  projects={[
    {
      name: "One Redcliffe",
      suburb: "Redcliffe",
      region: "Moreton Bay",
      status: "Under construction",
      statusType: "info",
      href: "/one-redcliffe",
      externalHref: "https://oneredcliffe.com.au",
    },
    { name: "Future project", placeholder: true, summary: "Added the same way." },
  ]}
  tone="base-200"
/>