Library · Listings & Cards

Article Card

Editorial preview card — cover image, category label, headline, excerpt and a date / read-time meta line. The whole card is one link target. Stays on the base surface pair regardless of the band tone around it.

Live preview — edit theme bottom-right 
---
import ArticleCard from "../components/primitives/card/ArticleCard.astro";
import Grid from "../components/primitives/layout/Grid.astro";

const articles = [
  {
    title: "Why downsizers are choosing the Redcliffe peninsula",
    href: "#",
    excerpt:
      "Bayside living within forty minutes of Brisbane, and not a lawn to mow between them.",
    category: "Buyer Guides",
    date: "2026-07-02",
    readMinutes: 6,
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop",
    imageAlt: "Foreshore at dusk",
  },
  {
    title: "Construction update: level nine complete",
    href: "#",
    excerpt: "The eastern tower reaches its ninth floor, three weeks ahead of programme.",
    category: "News & Articles",
    date: "2026-06-18",
    readMinutes: 3,
    image: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=800&h=600&fit=crop",
    imageAlt: "Apartment building under construction",
  },
  {
    title: "What settlement actually looks like when you buy off the plan",
    href: "#",
    excerpt: "The six months before handover, and what your solicitor will ask you for.",
    category: "Buying Off The Plan",
    date: "2026-05-29",
    readMinutes: 9,
    image: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=800&h=600&fit=crop",
    imageAlt: "Contract paperwork on a desk",
  },
];
---

<Grid columns={3} gap="l">
  {articles.map((article) => <ArticleCard article={article} />)}
</Grid>

Props

NameTypeRequiredDescription
article ArticleCardData Yes The article to render
level 'h2' | 'h3' | 'h4' — Semantic heading level for the headline (default: 'h3')
showImage boolean — Show the cover image (default: true)
class string — Additional classes

Example with all props

<ArticleCard
  article={{
    title: "Why downsizers are choosing Redcliffe",
    href: "/one-redcliffe/news/why-downsizers-choose-redcliffe",
    excerpt: "Peninsula living, without the maintenance.",
    category: "Buyer Guides",
    date: "2026-07-02",
    readMinutes: 6,
    image: "https://example.com/foreshore.jpg",
    imageAlt: "Redcliffe foreshore at dusk",
  }}
/>