کارت — Card

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

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

TSX

import { Card, CardBody, CardFooter, CardHeader, CardLink, CardMedia, CardTitle } from '@tokapps/tuk';

نمونهٔ زنده

پلتفرم گفت‌وگوی هم‌محله‌ای

ایده‌ای برای اتصال همسایه‌ها و کسب‌وکارهای محلی.

ایدهٔ شمارهٔ ۱۲۰۴

کل کارت قابل‌کلیک است، اما فقط یک لینک در ترتیب Tab دارد.

برجسته

خط‌دار

تخت

معماری

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

کاور گرادیانی از توکن‌های تم ساخته می‌شود؛ بدون تصویر هم کارت هویت دارد.

accent

series-1

series-2

series-3

series-4

series-5

series-6

series-7

Turborepo

کاشی کوچک برای لوگو یا حرف اول، کنار عنوان.

کد قابل کپی

پایه: سربرگ، بدنه و پانویس

TSX

import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle } from '@tokapps/tuk';export function IdeaCard() {  return (    <Card>      <CardHeader>        <CardTitle>پلتفرم گفت‌وگوی هم‌محله‌ای</CardTitle>      </CardHeader>      <CardBody>ایده‌ای برای اتصال همسایه‌ها و کسب‌وکارهای محلی.</CardBody>      <CardFooter>        <Button size="sm" variant="secondary">جزئیات</Button>      </CardFooter>    </Card>  );}

پیشرفته: کارت لینک‌دار با کنش فوتر

TSX

import { Button, Card, CardBody, CardFooter, CardHeader, CardLink, CardTitle } from '@tokapps/tuk';export function LinkableIdeaCard() {  return (    <Card as="article" interactive>      <CardHeader>        <CardTitle>          <CardLink href="/ideas/1204">ایدهٔ شمارهٔ ۱۲۰۴</CardLink>        </CardTitle>      </CardHeader>      <CardBody>کل کارت قابل‌کلیک است، اما فقط یک لینک در ترتیب Tab دارد.</CardBody>      <CardFooter>        <Button size="sm" variant="ghost">ذخیره</Button>      </CardFooter>    </Card>  );}

کاور: CardMedia با برچسب

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

TSX

import { Card, CardBody, CardHeader, CardLink, CardMedia, CardTitle } from '@tokapps/tuk';export function ArticleTeaser() {  return (    <Card as="article" interactive>      <CardMedia tone="series-5" label="معماری" />      <CardHeader>        <CardTitle><CardLink href="/articles/monorepo">مونوریپو با pnpm و Turborepo</CardLink></CardTitle>      </CardHeader>      <CardBody>کاور گرادیانی از توکن‌های تم ساخته می‌شود؛ بدون تصویر هم کارت هویت دارد.</CardBody>    </Card>  );}

کاور: همهٔ فام‌ها و تصویر واقعی

TSX

import { Card, CardMedia } from '@tokapps/tuk';const tones = ['accent', 'series-1', 'series-2', 'series-3', 'series-4', 'series-5', 'series-6', 'series-7'] as const;export function Tones() {  return tones.map((tone) => (    <Card key={tone} padding="none"><CardMedia tone={tone} label={<bdi>{tone}</bdi>} /></Card>  ));}// تصویر واقعی: alt خالی = تزئینی؛ alt پر = محتوایی<CardMedia src="/covers/x.webp" alt="" label="طراحی" />

کاور: کاشی لوگو کنار عنوان

TSX

import { Card, CardBody, CardHeader, CardLink, CardMedia, CardTitle } from '@tokapps/tuk';export function ToolTeaser() {  return (    <Card as="article">      <CardHeader>        <CardMedia shape="tile" tone="series-7">T</CardMedia>        <CardTitle><CardLink href="https://turbo.build">Turborepo</CardLink></CardTitle>      </CardHeader>      <CardBody>کاشی کوچک برای لوگو یا حرف اول، کنار عنوان.</CardBody>    </Card>  );}

الگوهای آماده‌ای که روی این کاور ساخته شده‌اند: ArticleCard، PodcastEpisodeCard، ToolCard.

وضعیت خاص: فهرست بدون پدینگ و چاپ پنهان

کارت حالت خطا یا غیرفعال ندارد. این نمونه ریشهٔ ، پدینگ و را نشان می‌دهد.

TSX

import { Card, CardBody, CardTitle } from '@tokapps/tuk';export function ProductList() {  return (    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 'var(--tds-space-3)' }}>      <Card as="li" padding="none" print="hide">        <CardBody>          <CardTitle as="h4">این فهرست در چاپ دیده نمی‌شود.</CardTitle>        </CardBody>      </Card>    </ul>  );}

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

پراپ	نوع	پیش‌فرض	توضیح
	· ·		سایه دارد، خط دور دارد، سطح فرورفته است.
	· · ·		پدینگ از توکن‌های ؛ بدون پدینگ.
	· · ·		عنصر HTML ریشه. برای فهرست‌ها یا بهتر است.
			hover و نشانگر کلیک را فعال می‌کند. کلیک کل کارت را فعال نمی‌کند؛ برای آن از استفاده کنید.
	·		کارت را در چاپ پنهان می‌کند.
		—	کلاس روی ریشه.
سایر ویژگی‌ها		—	روی ریشه اعمال می‌شوند.

، و

پراپ	نوع	پیش‌فرض	توضیح
		—	کلاس روی بخش.
سایر ویژگی‌ها		—	روی بخش اعمال می‌شوند.

پراپ	نوع	پیش‌فرض	توضیح
	· · · ·		سطح heading عنوان بر اساس ساختار صفحه.
		—	کلاس روی عنوان.
سایر ویژگی‌ها		—	روی عنوان اعمال می‌شوند.

پراپ	نوع	پیش‌فرض	توضیح
	· …		از تم پیروی می‌کند؛ رنگ‌های دسته‌ای پایدار برای دسته‌بندی محتوا (نام معنایی، نه نام رنگ).
	·		نوار بالای کارت (نسبت )؛ کاشی مربعی کنار عنوان.
		—	تصویر واقعی؛ کاور گرادیانی فقط پشت تصویرِ در حال بار است.
			خالی = تزئینی و پنهان از صفحه‌خوان.
		—	برچسب روی کاور، روی جفت AA /.
		—	محتوای وسط (مثلاً حرف اول در )؛ تزئینی.
سایر ویژگی‌ها		—	روی کاور.

پراپ	نوع	پیش‌فرض	توضیح
و سایر ویژگی‌های لینک		—	روی اعمال می‌شوند. متن لینک نام دسترسی کارت است.
		—	کلاس روی لینک.

ساختار و اسلات‌ها

code

Card (div | article | section | li)     data-tds="card"  data-variant  data-padding  [data-interactive]  data-print├─ CardMedia (اختیاری، اول)            data-part="media"  data-tone  data-shape  [data-image]│  ├─ img                              (اختیاری)│  ├─ span                             data-part="media-content"  (تزئینی)│  └─ span                             data-part="media-label"├─ CardHeader                         data-tds="card-part"  data-part="header"│  └─ CardTitle (h3 پیش‌فرض)           data-part="title"│     └─ CardLink (a)                  data-part="link"   (لینک کشیده روی کل کارت)├─ CardBody                           data-part="body"└─ CardFooter                         data-part="footer"   (z-index بالاتر از لینک)

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

همهٔ حالت‌ها

حالت	نشانه	نمایش
raised		زمینهٔ با سایهٔ .
outlined		حاشیهٔ .
flat		زمینهٔ .
پیش‌فرض	بدون	سطح ثابت، بدون hover.
hover (interactive)	و	زمینهٔ ؛ در سایه به می‌رود.
focus-visible (لینک داخلی)	یا روی کارت interactive	حلقهٔ فوکوس دور کل کارت با .
پدینگ	· · ·	فاصلهٔ داخلی متفاوت.
چاپ پنهان		کارت در چاپ پنهان.

در کد حالت خطا، غیرفعال یا بارگذاری تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

variant: ، ، .
پدینگ: ، ، ، .
عنصر ریشه: ، ، ، .
عنوان: سطح heading با از تا یا .
تعامل: برای hover؛ برای لینک کل سطح.
چاپ: یا .
نقاط توسعه: روی هر بخش؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ؛ ویژگی‌های و لینک؛ محتوای آزاد هر بخش.
size: در کد پراپ تعریف نشده است؛ اندازه از padding تعیین می‌شود.

تغییرات ممنوع (بنیان ثابت)

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

قرارداد کاور (استثنای گرادیان)

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

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

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

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. صدای ناوبری در سطح لینک یا مسیریاب است، نه در کارت. معادل بصری: حالت hover و فوکوس.
حرکت: گذار سایه و زمینهٔ hover با نام معنایی (). در یا سوییچ کاهش حرکت، زمان گذار ۱ms می‌شود.
چاپ: پیش‌فرض با حفظ رنگ؛ ؛ سایه حذف و مرز حفظ می‌شود؛ با پنهان می‌شود.

توکن‌ها

معنایی: ، ، ، ، ، ، ، .
کاور: (فام‌ها و ، ، ، ، ، ، ، ) و .
کامپوننتی: ، ، ، ، ، ، ، ، .
تایپوگرافی: ، ، ، .
کنترل: ، ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

اگر کارت آیکونی داشته باشد (مثلاً در فوتر)، آن را با کامپوننت و نام معنایی بسازید؛ مسیر asset مستند نمی‌شود.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ ساختار DOM و ARIA ثابت است.
Gesture ندارد؛ کلیک کل سطح از طریق و با ماوس یا لمس انجام می‌شود، و معادل کیبوردش و روی لینک است.

نکات

برای داده‌های ستونی با قابلیت مقایسه، از جدول استفاده کنید.
برای محتوای تاشو به‌جای نمایش همیشگی، از آکاردئون استفاده کنید.
برای پیام وضعیت، از هشدار استفاده کنید، نه کارت.

کارت — Card

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

TSX

import { Card, CardBody, CardFooter, CardHeader, CardLink, CardMedia, CardTitle } from '@tokapps/tuk';

نمونهٔ زنده

پلتفرم گفت‌وگوی هم‌محله‌ای

ایده‌ای برای اتصال همسایه‌ها و کسب‌وکارهای محلی.

ایدهٔ شمارهٔ ۱۲۰۴

کل کارت قابل‌کلیک است، اما فقط یک لینک در ترتیب Tab دارد.

برجسته

خط‌دار

تخت

معماری

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

کاور گرادیانی از توکن‌های تم ساخته می‌شود؛ بدون تصویر هم کارت هویت دارد.

accent

series-1

series-2

series-3

series-4

series-5

series-6

series-7

Turborepo

کاشی کوچک برای لوگو یا حرف اول، کنار عنوان.

کد قابل کپی

پایه: سربرگ، بدنه و پانویس

TSX

import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle } from '@tokapps/tuk';export function IdeaCard() {  return (    <Card>      <CardHeader>        <CardTitle>پلتفرم گفت‌وگوی هم‌محله‌ای</CardTitle>      </CardHeader>      <CardBody>ایده‌ای برای اتصال همسایه‌ها و کسب‌وکارهای محلی.</CardBody>      <CardFooter>        <Button size="sm" variant="secondary">جزئیات</Button>      </CardFooter>    </Card>  );}

پیشرفته: کارت لینک‌دار با کنش فوتر

TSX

import { Button, Card, CardBody, CardFooter, CardHeader, CardLink, CardTitle } from '@tokapps/tuk';export function LinkableIdeaCard() {  return (    <Card as="article" interactive>      <CardHeader>        <CardTitle>          <CardLink href="/ideas/1204">ایدهٔ شمارهٔ ۱۲۰۴</CardLink>        </CardTitle>      </CardHeader>      <CardBody>کل کارت قابل‌کلیک است، اما فقط یک لینک در ترتیب Tab دارد.</CardBody>      <CardFooter>        <Button size="sm" variant="ghost">ذخیره</Button>      </CardFooter>    </Card>  );}

کاور: CardMedia با برچسب

TSX

import { Card, CardBody, CardHeader, CardLink, CardMedia, CardTitle } from '@tokapps/tuk';export function ArticleTeaser() {  return (    <Card as="article" interactive>      <CardMedia tone="series-5" label="معماری" />      <CardHeader>        <CardTitle><CardLink href="/articles/monorepo">مونوریپو با pnpm و Turborepo</CardLink></CardTitle>      </CardHeader>      <CardBody>کاور گرادیانی از توکن‌های تم ساخته می‌شود؛ بدون تصویر هم کارت هویت دارد.</CardBody>    </Card>  );}

کاور: همهٔ فام‌ها و تصویر واقعی

TSX

import { Card, CardMedia } from '@tokapps/tuk';const tones = ['accent', 'series-1', 'series-2', 'series-3', 'series-4', 'series-5', 'series-6', 'series-7'] as const;export function Tones() {  return tones.map((tone) => (    <Card key={tone} padding="none"><CardMedia tone={tone} label={<bdi>{tone}</bdi>} /></Card>  ));}// تصویر واقعی: alt خالی = تزئینی؛ alt پر = محتوایی<CardMedia src="/covers/x.webp" alt="" label="طراحی" />

کاور: کاشی لوگو کنار عنوان

TSX

import { Card, CardBody, CardHeader, CardLink, CardMedia, CardTitle } from '@tokapps/tuk';export function ToolTeaser() {  return (    <Card as="article">      <CardHeader>        <CardMedia shape="tile" tone="series-7">T</CardMedia>        <CardTitle><CardLink href="https://turbo.build">Turborepo</CardLink></CardTitle>      </CardHeader>      <CardBody>کاشی کوچک برای لوگو یا حرف اول، کنار عنوان.</CardBody>    </Card>  );}

الگوهای آماده‌ای که روی این کاور ساخته شده‌اند: ArticleCard، PodcastEpisodeCard، ToolCard.

وضعیت خاص: فهرست بدون پدینگ و چاپ پنهان

کارت حالت خطا یا غیرفعال ندارد. این نمونه ریشهٔ ، پدینگ و را نشان می‌دهد.

TSX

import { Card, CardBody, CardTitle } from '@tokapps/tuk';export function ProductList() {  return (    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 'var(--tds-space-3)' }}>      <Card as="li" padding="none" print="hide">        <CardBody>          <CardTitle as="h4">این فهرست در چاپ دیده نمی‌شود.</CardTitle>        </CardBody>      </Card>    </ul>  );}

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

پراپ	نوع	پیش‌فرض	توضیح
	· ·		سایه دارد، خط دور دارد، سطح فرورفته است.
	· · ·		پدینگ از توکن‌های ؛ بدون پدینگ.
	· · ·		عنصر HTML ریشه. برای فهرست‌ها یا بهتر است.
			hover و نشانگر کلیک را فعال می‌کند. کلیک کل کارت را فعال نمی‌کند؛ برای آن از استفاده کنید.
	·		کارت را در چاپ پنهان می‌کند.
		—	کلاس روی ریشه.
سایر ویژگی‌ها		—	روی ریشه اعمال می‌شوند.

، و

پراپ	نوع	پیش‌فرض	توضیح
		—	کلاس روی بخش.
سایر ویژگی‌ها		—	روی بخش اعمال می‌شوند.

پراپ	نوع	پیش‌فرض	توضیح
	· · · ·		سطح heading عنوان بر اساس ساختار صفحه.
		—	کلاس روی عنوان.
سایر ویژگی‌ها		—	روی عنوان اعمال می‌شوند.

پراپ	نوع	پیش‌فرض	توضیح
	· …		از تم پیروی می‌کند؛ رنگ‌های دسته‌ای پایدار برای دسته‌بندی محتوا (نام معنایی، نه نام رنگ).
	·		نوار بالای کارت (نسبت )؛ کاشی مربعی کنار عنوان.
		—	تصویر واقعی؛ کاور گرادیانی فقط پشت تصویرِ در حال بار است.
			خالی = تزئینی و پنهان از صفحه‌خوان.
		—	برچسب روی کاور، روی جفت AA /.
		—	محتوای وسط (مثلاً حرف اول در )؛ تزئینی.
سایر ویژگی‌ها		—	روی کاور.

پراپ	نوع	پیش‌فرض	توضیح
و سایر ویژگی‌های لینک		—	روی اعمال می‌شوند. متن لینک نام دسترسی کارت است.
		—	کلاس روی لینک.

ساختار و اسلات‌ها

code

Card (div | article | section | li)     data-tds="card"  data-variant  data-padding  [data-interactive]  data-print├─ CardMedia (اختیاری، اول)            data-part="media"  data-tone  data-shape  [data-image]│  ├─ img                              (اختیاری)│  ├─ span                             data-part="media-content"  (تزئینی)│  └─ span                             data-part="media-label"├─ CardHeader                         data-tds="card-part"  data-part="header"│  └─ CardTitle (h3 پیش‌فرض)           data-part="title"│     └─ CardLink (a)                  data-part="link"   (لینک کشیده روی کل کارت)├─ CardBody                           data-part="body"└─ CardFooter                         data-part="footer"   (z-index بالاتر از لینک)

همهٔ حالت‌ها

حالت	نشانه	نمایش
raised		زمینهٔ با سایهٔ .
outlined		حاشیهٔ .
flat		زمینهٔ .
پیش‌فرض	بدون	سطح ثابت، بدون hover.
hover (interactive)	و	زمینهٔ ؛ در سایه به می‌رود.
focus-visible (لینک داخلی)	یا روی کارت interactive	حلقهٔ فوکوس دور کل کارت با .
پدینگ	· · ·	فاصلهٔ داخلی متفاوت.
چاپ پنهان		کارت در چاپ پنهان.

در کد حالت خطا، غیرفعال یا بارگذاری تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

variant: ، ، .
پدینگ: ، ، ، .
عنصر ریشه: ، ، ، .
عنوان: سطح heading با از تا یا .
تعامل: برای hover؛ برای لینک کل سطح.
چاپ: یا .
نقاط توسعه: روی هر بخش؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ؛ ویژگی‌های و لینک؛ محتوای آزاد هر بخش.
size: در کد پراپ تعریف نشده است؛ اندازه از padding تعیین می‌شود.

تغییرات ممنوع (بنیان ثابت)

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

قرارداد کاور (استثنای گرادیان)

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

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

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

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. صدای ناوبری در سطح لینک یا مسیریاب است، نه در کارت. معادل بصری: حالت hover و فوکوس.
حرکت: گذار سایه و زمینهٔ hover با نام معنایی (). در یا سوییچ کاهش حرکت، زمان گذار ۱ms می‌شود.
چاپ: پیش‌فرض با حفظ رنگ؛ ؛ سایه حذف و مرز حفظ می‌شود؛ با پنهان می‌شود.

توکن‌ها

معنایی: ، ، ، ، ، ، ، .
کاور: (فام‌ها و ، ، ، ، ، ، ، ) و .
کامپوننتی: ، ، ، ، ، ، ، ، .
تایپوگرافی: ، ، ، .
کنترل: ، ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

اگر کارت آیکونی داشته باشد (مثلاً در فوتر)، آن را با کامپوننت و نام معنایی بسازید؛ مسیر asset مستند نمی‌شود.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ ساختار DOM و ARIA ثابت است.
Gesture ندارد؛ کلیک کل سطح از طریق و با ماوس یا لمس انجام می‌شود، و معادل کیبوردش و روی لینک است.

نکات

برای داده‌های ستونی با قابلیت مقایسه، از جدول استفاده کنید.
برای محتوای تاشو به‌جای نمایش همیشگی، از آکاردئون استفاده کنید.
برای پیام وضعیت، از هشدار استفاده کنید، نه کارت.

کارت — Card

نمونهٔ زنده

پلتفرم گفت‌وگوی هم‌محله‌ای

ایدهٔ شمارهٔ ۱۲۰۴

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

Turborepo

کد قابل کپی

پایه: سربرگ، بدنه و پانویس

پیشرفته: کارت لینک‌دار با کنش فوتر

کاور: CardMedia با برچسب

کاور: همهٔ فام‌ها و تصویر واقعی

کاور: کاشی لوگو کنار عنوان

وضعیت خاص: فهرست بدون پدینگ و چاپ پنهان

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

Cardکپی کدکپی کد

CardHeaderکپی کدکپی کد، CardBodyکپی کدکپی کد و CardFooterکپی کدکپی کد

CardTitleکپی کدکپی کد

CardMediaکپی کدکپی کد

CardLinkکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

قرارداد کاور (استثنای گرادیان)

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

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

کارت — Card

نمونهٔ زنده

پلتفرم گفت‌وگوی هم‌محله‌ای

ایدهٔ شمارهٔ ۱۲۰۴

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

Turborepo

کد قابل کپی

پایه: سربرگ، بدنه و پانویس

پیشرفته: کارت لینک‌دار با کنش فوتر

کاور: CardMedia با برچسب

کاور: همهٔ فام‌ها و تصویر واقعی

کاور: کاشی لوگو کنار عنوان

وضعیت خاص: فهرست بدون پدینگ و چاپ پنهان

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

Cardکپی کدکپی کد

CardHeaderکپی کدکپی کد، CardBodyکپی کدکپی کد و CardFooterکپی کدکپی کد

CardTitleکپی کدکپی کد

CardMediaکپی کدکپی کد

CardLinkکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

قرارداد کاور (استثنای گرادیان)

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

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

، و

، و