Article Card

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/article-card.json

npx shadcn@latest add @interlace/article-card

Import

4 named exports — pull the parts you need.

import { ArticleCard, ArticleCardVariant, FeaturedArticleCard, FeaturedArticleCardProps } from '@/components/ui/patterns/article-card';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

CardShell                        (a[href] — data-slot="article-card")
    └─ Card                        (primitives/card, py-0 gap-0)
        ├─ StackBody               (ArticleCard)
        │   ├─ cover aspect-[1000/420] + SourceChip
        │   ├─ CardHeader          (avatar + author name + date)
        │   ├─ CardContent         (title, description, tag Badges)
        │   └─ CardFooter          (MetaChips + ExternalLink on hover)
        └─ OverlayBody             (FeaturedArticleCard)
            ├─ absolute cover + scrim gradient
            ├─ FeaturedChip / SourceChip
            └─ tags, h2 title, description, author · date · MetaChips

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Skeleton

Pass loading and the component renders a shape-matched <Skeleton /> in its own place — same box, so nothing reflows when the data lands. Below is the same story with loading={true}.

<ArticleCard loading={isPending} />

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Native element semantics — no interaction layer to get wrong.

Focus ring (WCAG 2.2 SC 2.4.13)

Inherited from the preflight focus contract shipped in @interlace/theme.

Reduced motion

Animation is gated on prefers-reduced-motion.

ARIA in the source

None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

16 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

Native / no Base UI dependency

Lucide icons

• Clock
• ExternalLink
• Eye
• Heart
• MessageCircle
• Sparkles

NPM dependencies

• lucide-react

Registry dependencies

• @interlace/theme
• @interlace/badge
• @interlace/card
• @interlace/cn
• @interlace/skeleton

Source

The full implementation — components/ui/patterns/article-card.tsx once installed.

'use client';

import * as React from 'react';

// @interlace/article-card v1.5.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/article-card
// What changed since: https://ds.interlace.tools/c/article-card#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — ArticleCard + FeaturedArticleCard
 *
 * Two article tiles that share one focusable-anchor shell: `ArticleCard`, the
 * stacked grid tile with the cover on top, and `FeaturedArticleCard`, the
 * full-bleed hero whose copy sits on a gradient scrim over the image. Both
 * read the same props.
 *
 * They are two components rather than one `variant` prop because the rendered
 * tree differs entirely (R11). The old `variant` still type-checks for one
 * minor: `variant="overlay"` delegates to `FeaturedArticleCard` and a

…929 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.