ArticleCard

Overview

ArticleCard is a CORE-OWNED UI component in src/core/components/ui/ArticleCard.astro. It renders a single article entry as a bordered card with title link, optional publication date, and optional excerpt. It is used on article listing and paginated archive pages.

Props

Prop	Type	Default	Description
title	string	required	Article title
href	string	required	Link to the full article
description	string	—	Article excerpt or summary
datePublished	Date	—	Publication date, rendered via the FormatDate primitive
headingLevel	1–6	2	Semantic heading level
headingSize	xs–display	"md"	Visual heading size (decoupled from semantic level)
class	string	—	Additional CSS classes

The component also accepts rest props ([key: string]: unknown) which are spread onto the root <article> element as passthrough HTML attributes.

Behavior

Title link

The card title is always rendered as a link. The title text is wrapped in an <a> element pointing to href, with hover and focus-visible styles applied directly.

Full-height cards

The root <article> uses h-full flex flex-col to ensure uniform card heights when placed in a grid layout. This prevents shorter cards from collapsing when adjacent cards have longer content.

Date formatting

When datePublished is provided, it is rendered via the FormatDate primitive component, which outputs a <time> element with a machine-readable datetime attribute and locale-aware display formatting.

Conditional rendering

Both datePublished and description are optional. When omitted, their respective DOM elements are not rendered — no empty containers appear in the output.

Styling approach

ArticleCard is styled entirely with Tailwind utility classes — it has no scoped <style> block. Surface uses bg-surface-soft with border-border-default.

CSS API

BEM root class: article-card

Class	Element
.article-card	Root <article>
.article-card__title	Heading wrapper
.article-card__date	Date paragraph
.article-card__excerpt	Description text

Listing Grid Components

Two companion grid components provide the standard responsive layout for listing pages. They own the <ul> wrapper and co-located CSS so individual pages don’t duplicate grid styles.

ArticleListingGrid

src/core/components/ui/ArticleListingGrid.astro — responsive 1→2→3 column grid for article cards. Used by all article, category, and tag listing pages. Pass <li> elements containing ArticleCard as slot children.

TaxonomyListingGrid

src/core/components/ui/TaxonomyListingGrid.astro — responsive 1→2→3 column grid for taxonomy term links. Used by the categories index and tags index pages. Includes scoped styles for .taxonomy-listing__link and .taxonomy-listing__count elements.

Both components render a <ul role="list"> and handle the responsive column breakpoints (1 column default, 2 at 48rem, 3 at 64rem).

Usage

ArticleCard is used inside ArticleListingGrid on all article listing routes:

---
import ArticleCard from "@core/components/ui/ArticleCard.astro";
import ArticleListingGrid from "@core/components/ui/ArticleListingGrid.astro";
---

<ArticleListingGrid>
  <li>
    <ArticleCard
      title="Getting Started with Astro"
      href="/articles/getting-started/"
      description="A beginner's guide to building with Astro."
      datePublished={new Date("2026-01-15")}
    />
  </li>
</ArticleListingGrid>

Accessibility

• The title link receives focus-visible styles using outline-width-focus, outline-focus-ring, and outline-offset-focus utilities.
• No aria-label is needed on the <article> — the heading link provides the accessible name.
• The <time> element from FormatDate provides machine-readable date information for assistive technologies.