کارت (Card)

معرفی

کارت یک کانتینر انعطاف‌پذیر برای نمایش محتوای مرتبط است.

چه زمانی استفاده کنیم:

• برای گروه‌بندی محتوای مرتبط در یک بخش مجزا
• برای نمایش آیتم‌ها در grid layout
• به عنوان container عمومی برای فرم‌ها، محتوا و اطلاعات

چه زمانی استفاده نکنیم:

• برای نمایش یک عدد یا متریک — از MetricCard یا StatDisplay استفاده کنید
• برای نمایش اطلاعات پروفایل — از ProfileCard استفاده کنید
• برای مقایسه دو آیتم — از ComparisonCard استفاده کنید

استفاده

زمین بازی

با تغییر تنظیمات زیر، کارت را به صورت زنده مشاهده کنید.

import { Card } from '@parto-system-design/ui'

<Card />

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '@parto-system-design/ui'
;<Card>
  <CardHeader>
    <CardTitle>عنوان کارت</CardTitle>
    <CardDescription>توضیحات کارت</CardDescription>
  </CardHeader>
  <CardContent>
    <p>محتوای اصلی کارت</p>
  </CardContent>
  <CardFooter>
    <Button>عملیات</Button>
  </CardFooter>
</Card>

حالت‌ها و انواع

انواع ظاهری

اندازه‌ها

کامپوننت‌ها

Props

Card

CardHeader

CardTitle

CardDescription

CardContent

CardFooter

راهنمای استفاده

دسترسی‌پذیری

• کارت از تگ‌های معنادار HTML استفاده می‌کند
• CardTitle به عنوان heading عمل می‌کند و سلسله‌مراتب صفحه را حفظ می‌کند
• برای کارت‌های تعاملی (قابل کلیک)، role="button" و tabIndex اضافه کنید
• رنگ‌ها و کنتراست‌ها با استانداردهای WCAG AA سازگار هستند

کامپوننت‌های مرتبط

• MetricCard — اگر نیاز به نمایش یک عدد KPI با sparkline و درصد تغییر دارید، از MetricCard استفاده کنید
• ProfileCard — اگر محتوای کارت مربوط به پروفایل کاربر است، از ProfileCard استفاده کنید
• ComparisonCard — اگر نیاز به مقایسه مقدار بین دو دوره زمانی دارید، از ComparisonCard استفاده کنید