ArticleCard — کارت مقاله با کاور

برای فهرست و شبکهٔ مقاله‌ها. بالای کارت یک کاور است: اگر بدهید تصویر نمایش داده می‌شود، وگرنه کاور گرادیانی از توکن‌های تم ساخته می‌شود (). به این ترتیب کارت بدون تصویر هم هویت دارد. فام کاور با تعیین می‌شود: از تم پیروی می‌کند و تا برای دسته‌بندی محتوا هستند (هر دسته یک سری ثابت).

وضعیت: beta · لایه: ۴ () · کد: · Storybook:

TSX

import { ArticleCard } from '@tokapps/patterns';

نمونهٔ زنده

patterns/article-card

معماری

مونوریپو با pnpm و Turborepo

چطور چند پکیج را در یک مخزن نگه داریم، کش بیلد را به اشتراک بگذاریم و زمان CI را نصف کنیم.

۲۰ مهر ۱۴۰۵۷ دقیقه مطالعه

دسترس‌پذیری

دسترس‌پذیری فرم‌ها در RTL

برچسب، پیام خطا و ترتیب فوکوس در فرم‌های راست‌به‌چپ؛ با نمونه‌های واقعی.

سمن۱۸ مهر ۱۴۰۵۵ دقیقه مطالعه

انتشار

یادداشت‌های انتشار نسخهٔ ۰٫۲

۱۵ مهر ۱۴۰۵

کد قابل کپی

پایه: دسته، تاریخ و زمان مطالعه

TSX

import { ArticleCard } from '@tokapps/patterns';<ArticleCard  title="مونوریپو با pnpm و Turborepo"  href="/articles/monorepo-pnpm-turborepo"  excerpt="چطور چند پکیج را در یک مخزن نگه داریم، کش بیلد را به اشتراک بگذاریم و زمان CI را نصف کنیم."  category="معماری"  tone="series-5"  date="۲۰ مهر ۱۴۰۵"  dateTime="2026-10-12"  readingMinutes={7}/>

با نویسنده

TSX

<ArticleCard  title="دسترس‌پذیری فرم‌ها در RTL"  href="/articles/rtl-forms-a11y"  excerpt="برچسب، پیام خطا و ترتیب فوکوس در فرم‌های راست‌به‌چپ؛ با نمونه‌های واقعی."  category="دسترس‌پذیری"  tone="series-7"  author="سمن"  date="۱۸ مهر ۱۴۰۵"  dateTime="2026-10-10"  readingMinutes={5}/>

کمینه: فام تم، بدون خلاصه

TSX

<ArticleCard title="یادداشت‌های انتشار نسخهٔ ۰٫۲" href="/articles/release-0-2" category="انتشار" date="۱۵ مهر ۱۴۰۵" dateTime="2026-10-07" />

با تصویر جلد

TSX

<ArticleCard title="…" href="/articles/x" cover="/covers/x.webp" category="طراحی" />

نگاشت دسته به سری (در محصول)

TSX

import type { CardMediaTone } from '@tokapps/tuk/data-display';const toneByCategory: Record<string, CardMediaTone> = { معماری: 'series-5', طراحی: 'series-2', دسترس‌پذیری: 'series-7' };<div style={{ display: 'grid', gap: 'var(--tds-space-4)', gridTemplateColumns: 'repeat(auto-fill, minmax(17rem, 1fr))' }}>  {articles.map((a) => (    <ArticleCard key={a.slug} title={a.title} href={`/articles/${a.slug}`} excerpt={a.excerpt}      category={a.category} tone={toneByCategory[a.category] ?? 'accent'} date={a.dateFa} dateTime={a.date} readingMinutes={a.minutes} />  ))}</div>

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
		—	عنوان و نام لینک.
		—	مسیر مقاله؛ کل کارت با لینک کشیده کلیک‌پذیر است.
		—	خلاصه؛ حداکثر سه خط ().
		—	برچسب روی کاور (روی جفت AA).
	· …		فام کاور.
		—	تصویر جلد؛ جای کاور گرادیانی را می‌گیرد.
/		—	تاریخ نمایشی و ISO برای .
		—	«۷ دقیقه مطالعه» با ارقام فارسی.
		—	نویسنده در متادیتا.
	· ·		سطح عنوان بر اساس ساختار صفحه.
سایر ویژگی‌ها		—	روی ریشه.

حالت‌ها

پیش‌فرض · hover (سطح ) · focus-visible (حلقه دور کل کارت) · با تصویر جلد · کنتراست بالا (کاور تخت با مرز) · چاپ (کاور تخت، خلاصه کامل).

RTL، کیبورد و صفحه‌خوان

یک توقف (لینک عنوان)؛ مقاله را باز می‌کند.
ترتیب خواندن: برچسب دسته، عنوان، خلاصه، نویسنده، تاریخ ()، زمان مطالعه؛ جداکننده‌ها پنهان‌اند.
نور کاور در RTL از لبهٔ آغاز (راست) می‌تابد.
دسته با متن برچسب نشان داده می‌شود؛ فام کاور هرگز تنها حامل معنا نیست.

قرارداد ARCH

کاور گرادیانی تنها استثنای رسمی گرادیان پس‌زمینه بیرون از است و فقط داخل ساخته می‌شود (، ثبت در و ). الگو هیچ گرادیان یا رنگ خامی ندارد.
تم فقط توکن‌های را تنظیم می‌کند؛ ساختار، heading و لینک کشیده ثابت‌اند.
کاور حرکت ندارد؛ hover کارت از می‌آید و به کاهش حرکت احترام می‌گذارد.