Magazine-style news card in five sizes — role-aware editor and viewer modes, permissions matrix, badges, paywall and sensitivity gates.
First component in the news-domain family (siblings: page-hero, magazine-layout, related-articles-ribbon-01 queued). v0.3.0 mirrors the post-card v0.3.2 trait set translated into editorial vocabulary (`editor` instead of `owner`; `publish/unpublish/feature` instead of `pin/markSensitive`; `paywall` distinct from `sensitive`). Strictly additive on v0.2: every v0.2.x consumer keeps working unchanged (all new fields/props/labels optional; existing `author` string + `date` field preserved alongside new structured `authorEntity` + `publishedAt`). Engagement-bar-01 is NOT a peer dep — consumers compose it via the `renderEngagementCounts` slot on news article detail pages per the documented integration pattern. F-S1 lock applied for cross-procomp imports (RELATIVE paths to specific files; `CommentMenuItem` reused from comment-thread). F-cross-13 defensive DropdownMenu pattern (direct trigger, no asChild). Migration origin: kasder kas-social-front-v0 NewsCard.tsx (v0.1 base; v0.3 expansion is greenfield).
pnpm dlx shadcn@latest init"registries": {
"@ilinxa": "https://ui.ilinxa.com/r/{name}.json"
}pnpm dlx shadcn@latest add @ilinxa/news-cardAdd -fixtures for dummy data:
pnpm dlx shadcn@latest add @ilinxa/news-card-fixturesReach for NewsCard when you need a magazine-style article preview that flexes across different layout densities — a featured hero, a 2-col horizontal article, a vertical grid cell, a sidebar thumb, or a list row — all driven by a single variant prop. Built for news, blog, editorial, or documentation feeds.
import { NewsCard } from "@/components/news-card";
<NewsCard
item={{
id: "1",
title: "Headline",
image: "/cover.jpg",
excerpt: "Lead paragraph…",
category: "Sustainability",
author: "A. Yilmaz",
date: "2026-05-01",
readTime: 8,
}}
variant="medium"
href="/news/1"
categoryStyles={{
Sustainability: "bg-emerald-500/10 text-emerald-600",
}}
/>;featured — full-bleed hero card with image overlay, serif title, full meta row, and a Read-More CTA. The badge wears a bg-black/40 backdrop-blur-sm wrapper for legibility.large — 2-column horizontal card. Image left, serif title + excerpt + meta right. Good as the lead article in a main column under a featured hero.medium — vertical card with image-on-top, optional view-chip overlay, and a kicker footer (separator + author/date). The default workhorse for grid cells.small — compact horizontal thumb tile. Sidebar density; no excerpt, no actions slot.list — full-width row with badge + title + truncated excerpt + chevron. The chevron is replaced by the actions slot when provided.The card renders <a>by default. Pass your framework's link via linkComponent for SPA navigation:
import NextLink from "next/link";
<NewsCard
item={item}
href={`/news/${item.id}`}
linkComponent={NextLink}
/>;The card uses an overlay-link pattern: a real <a> covers the whole card via position: absolute; inset: 0. This keeps the entire surface clickable AND lets you embed independently-clickable buttons via the actions prop. The actions cluster gets position: relative; z-index: 10 so it sits above the overlay.
<NewsCard
item={item}
variant="medium"
href={`/news/${item.id}`}
actions={
<div className="flex gap-2">
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
bookmark(item.id);
}}
aria-label="Bookmark"
>
<Bookmark />
</button>
<button onClick={(e) => { e.preventDefault(); e.stopPropagation(); share(item); }} aria-label="Share">
<Share2 />
</button>
</div>
}
/>;Inside the action button's onClick, call e.preventDefault() + e.stopPropagation()so the click doesn't bubble to the link overlay's default navigation. The Demo's "Actions slot" tab includes a working example.
<NewsCard
item={item}
variant="featured"
labels={{ readMore: "Devamını Oku", minutesRead: "dk okuma" }}
formatRelativeTime={(d) => myI18n.formatRelative(d)}
formatDate={(d) => d.toLocaleDateString("tr-TR", {
day: "numeric", month: "long", year: "numeric",
})}
/>;Only id, title, and image are required. Missing excerpt, category, author, date, readTime, or views are gracefully omitted — no empty placeholders, no layout glitches.
The title uses Tailwind's font-serif utility which maps to the pro-ui-wide --font-serif CSS variable (default: Playfair Display). Override at any DOM scope:
/* App-wide override */
:root { --font-serif: "Lora", Georgia, serif; }
/* Section-scoped override */
<section style={{ "--font-serif": '"Cormorant Garamond"' } as any}>
<NewsCard ... />
</section>
/* Per-card override */
<NewsCard
item={item}
titleClassName="font-sans tracking-tight"
/>;aria-labelledby; override with ariaLabel.:has(a:focus-visible)), not just the invisible link rectangle.aria-hidden.mediumannounces "N views" via aria-label.motion-safe: — reduced-motion users see static cards.