Article Card

Clickable card for blog/article listings with hover elevation and focus styles.

---

Classes

Class	Purpose
.article-card	Block-level card with hover shadow + translateY

Features

• surface-raised background
• Transition on box-shadow and transform
• Focus-visible outline with --color-focus-ring
• prefers-reduced-motion disables transitions

Preview

<article class="article-card shadow-sm" style="max-width: 420px">
  <div class="article-meta" style="font-size: var(--font-size-xs); color: var(--color-text-tertiary)">
    <span class="article-tag" style="font-size: var(--font-size-xs)">Design</span>
    <time>1 March 2026</time>
  </div>
  <h2 style="font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold)">Article Title</h2>
  <p class="article-excerpt" style="font-size: var(--font-size-sm); color: var(--color-text-secondary)">A short excerpt describing the article content.</p>
</article>

Design 1 March 2026

Article Title

A short excerpt describing the article content.

---

Usage

<article class="article-card shadow-sm">
  <div class="article-meta text-xs text-tertiary">
    <span class="article-tag text-xs font-medium">Design</span>
    <time datetime="2026-03-01">1 March 2026</time>
  </div>
  <h2 class="text-xl font-semibold">
    <a href="/post">Article Title</a>
  </h2>
  <p class="article-excerpt text-secondary text-sm">
    Short excerpt...
  </p>
</article>