Library · Listings & Cards

Article Feed

News/article feed — optional heading, optional client-side filter chips, and a responsive grid of article cards. Filters by content pillar or by project. Without JavaScript the chip bar never appears and every article is listed.

Default 
---
import ArticleFeed from "../components/figma/ArticleFeed.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.",
    category: "Buyer Guides",
    project: "One Redcliffe",
    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, ahead of programme.",
    category: "News & Articles",
    project: "One Redcliffe",
    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: "Ten minutes on foot: the peninsula's dining strip",
    href: "#",
    excerpt: "Where to eat between Suttons Beach and the jetty.",
    category: "Lifestyle",
    project: "One Redcliffe",
    date: "2026-06-04",
    readMinutes: 4,
    image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&h=600&fit=crop",
    imageAlt: "Cafe terrace",
  },
  {
    title: "Getting to the CBD: every route, timed",
    href: "#",
    excerpt: "Rail, road and ferry from the peninsula, measured at peak.",
    category: "Location",
    project: "One Redcliffe",
    date: "2026-05-21",
    readMinutes: 5,
    image: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=600&fit=crop",
    imageAlt: "Commuter train platform",
  },
  {
    title: "What settlement looks like when you buy off the plan",
    href: "#",
    excerpt: "The six months before handover, and what your solicitor will need.",
    category: "Buying Off The Plan",
    project: "One Redcliffe",
    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",
  },
  {
    title: "Inside the display suite: Champagne and Truffle",
    href: "#",
    excerpt: "Two finish palettes, and how to choose between them.",
    category: "The Residences",
    project: "One Redcliffe",
    date: "2026-04-30",
    readMinutes: 4,
    image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&h=600&fit=crop",
    imageAlt: "Apartment interior",
  },
];
---

<ArticleFeed
  eyebrow="From the peninsula"
  title="News and articles"
  filterBy="category"
  columns={3}
  articles={articles}
  tone="base-200"
/>
By Project 
---
// Variant: the same feed filtered by PROJECT rather than by content pillar —
// the communities-home case, where one feed carries several developments.
import ArticleFeed from "../components/figma/ArticleFeed.astro";

const articles = [
  {
    title: "Why downsizers are choosing the Redcliffe peninsula",
    href: "#",
    excerpt: "Bayside living within forty minutes of Brisbane.",
    category: "Buyer Guides",
    project: "One Redcliffe",
    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.",
    category: "News & Articles",
    project: "One Redcliffe",
    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: "Chevron Island: a neighbourhood in its own right",
    href: "#",
    excerpt: "Why the island reads differently to the rest of the Gold Coast.",
    category: "Location",
    project: "Bronze on Chevron",
    date: "2026-06-11",
    readMinutes: 5,
    image: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=600&fit=crop",
    imageAlt: "Street view",
  },
  {
    title: "Caloundra's quiet end",
    href: "#",
    excerpt: "The stretch of coast that has stayed residential.",
    category: "Lifestyle",
    project: "Eden Caloundra",
    date: "2026-05-27",
    readMinutes: 4,
    image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&h=600&fit=crop",
    imageAlt: "Coastal street",
  },
];
---

<ArticleFeed
  eyebrow="Across our communities"
  title="Latest news"
  filterBy="project"
  columns={2}
  articles={articles}
  tone="base-100"
/>

Props

NameTypeRequiredDescription
articles ArticleCardData[] Yes Articles to list
title string — Section heading
eyebrow string — Small line above the heading
filterBy 'category' | 'project' — Which field the chips filter on. Omit for no filtering.
filters FeedFilter[] — Explicit chip list. Omit to derive it from the articles, in first-appearance order.
allLabel string — Label for the "no filter" chip (default: 'All')
columns 2 | 3 | 4 — Grid column count (default: 3)
limit number — Cap the number of articles rendered (e.g. 3 for a related-articles rail)
level 'h2' | 'h3' — Semantic heading level (default: 'h2')
emptyMessage string — Shown when a filter matches nothing (default: 'No articles in this category yet.')
tone "base-100" | "base-200" | "base-300" | "secondary" — Background tone — the Figma colour-variant axis

Example with all props

<ArticleFeed
  title="Latest news"
  eyebrow="From the community"
  filterBy="category"
  columns={3}
  articles={[
    { title: "…", href: "#", category: "Location", date: "2026-07-02", readMinutes: 5 },
  ]}
  tone="base-200"
/>