Library · Content Sections

Content / Article Meta

Article context band — breadcrumb trail plus category, publication date, read time and an optional byline with portrait. Sits between the article banner and the body copy. Tone via the shared contract.

Live preview — edit theme bottom-right

---
import ArticleMeta from "../components/figma/ArticleMeta.astro";
---

<ArticleMeta
  tone="base-200"
  breadcrumbs={[
    { label: "Home", href: "#" },
    { label: "One Redcliffe", href: "#" },
    { label: "News & Articles", href: "#" },
    { label: "Why downsizers are choosing the Redcliffe peninsula" },
  ]}
  category="Buyer Guides"
  date="2026-07-02"
  readMinutes={6}
  author={{
    name: "Andrew Borg",
    role: "Project Marketing",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop",
  }}
/>

Props

Name	Type	Required	Description
`breadcrumbs`	`Crumb[]`	—	Breadcrumb trail. The last item is treated as the current page.
`category`	`string`	—	Content pillar, e.g. "Location"
`date`	`string`	—	ISO date string
`readMinutes`	`number`	—	Reading time in minutes
`author`	`ArticleAuthor`	—	Byline
`tone`	`"base-100" \| "base-200" \| "base-300" \| "secondary"`	—	Background tone — the Figma colour-variant axis

Example with all props

<ArticleMeta
  breadcrumbs={[
    { label: "Home", href: "/" },
    { label: "One Redcliffe", href: "/one-redcliffe" },
    { label: "Why downsizers are choosing Redcliffe" },
  ]}
  category="Buyer Guides"
  date="2026-07-02"
  readMinutes={6}
  author={{ name: "Andrew Borg", role: "Project Marketing" }}
  tone="base-200"
/>