Library · Listings & Cards

Article Featured

Editorial lead for a content hub — one article at feature weight, with a large cover image beside a category label, headline, standfirst, byline and read-on link. Image side is switchable.

Live preview — edit theme bottom-right

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

<ArticleFeatured
  eyebrow="Featured"
  side="left"
  tone="base-200"
  article={{
    title: "A waterfront chapter, three years in the making",
    href: "#",
    standfirst:
      "From a vacant parade frontage to a two-tower address on the bay — the decisions, the setbacks and the reason the eastern tower faces the water the way it does.",
    category: "News & Articles",
    date: "2026-07-18",
    readMinutes: 8,
    author: "Andrew Borg",
    image: "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1200&h=900&fit=crop",
    imageAlt: "Aerial view of a waterfront development",
  }}
/>

Props

Name	Type	Required	Description
`article`	`FeaturedArticle`	Yes	The article to feature
`eyebrow`	`string`	—	Small line above the headline, e.g. "Featured"
`side`	`'left' \| 'right'`	—	Which side the image sits on (default: 'left')
`ctaLabel`	`string`	—	Read-on link text (default: 'Read the article')
`level`	`'h2' \| 'h3'`	—	Semantic heading level (default: 'h2')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "secondary"`	—	Background tone — the Figma colour-variant axis

Example with all props

<ArticleFeatured
  eyebrow="Featured"
  side="left"
  article={{
    title: "A waterfront chapter, three years in the making",
    href: "#",
    standfirst: "How the peninsula's next address came together.",
    category: "News & Articles",
    date: "2026-07-18",
    readMinutes: 8,
    image: "https://example.com/aerial.jpg",
    author: "Andrew Borg",
  }}
  tone="base-200"
/>