Card

کامپوننت Card یک ظرف بصری برای گروه‌بندی محتوای مرتبط است؛ مثل کارت محصول، کارت پروفایل یا بخش‌های یک صفحه. عمداً ساده است — فقط استایل ظاهری (پس‌زمینه، سایه، گوشه‌ی گرد و padding) می‌دهد و ساختار داخلی با خودت است.

Import

import { Card } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Card>
  <h3>عنوان کارت</h3>
  <p>توضیح کوتاه کارت</p>
</Card>

Playground

پلن حرفه‌ای

برای تیم‌های کوچک و در حال رشد

۴۹۰,۰۰۰ تومان / ماه

title

description

price

<Card>
  <h3>پلن حرفه‌ای</h3>
  <p>برای تیم‌های کوچک و در حال رشد</p>
  <p style={{ fontSize: "18px" }}>۴۹۰,۰۰۰ تومان / ماه</p>
  <Button>انتخاب پلن</Button>
</Card>

Combining with Other Components

Card با بقیه‌ی کامپوننت‌ها ترکیب می‌شود؛ چند نمونه:

// کارت محصول با دکمه
<Card>
  <img src="/product.jpg" alt="عکس محصول" />
  <h3>نام محصول</h3>
  <p>۱,۲۰۰,۰۰۰ تومان</p>
  <Button>افزودن به سبد</Button>
</Card>

Clickable Card

اگر کل کارت یک action انجام می‌دهد، handler کیبورد را هم اضافه کن. برای navigation واقعی، ترجیحاً یک <a> داخل کارت قرار بده؛ role="button" فقط وقتی مناسب است که رفتار کارت واقعاً شبیه دکمه باشد:

function ProductCard() {
  function openProduct() {
    console.log("open product");
  }

  function handleKeyDown(event) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      openProduct();
    }
  }

  return (
    <Card
      className="product-card"
      role="button"
      tabIndex={0}
      onClick={openProduct}
      onKeyDown={handleKeyDown}
      aria-label="مشاهده محصول قهوه اسپرسو"
    >
      <h3>قهوه اسپرسو</h3>
      <p>مشاهده جزئیات و افزودن به سبد خرید</p>
    </Card>
  );
}

Notes

• چون Card یک <div> استاندارد است، هر ویژگی HTML (مثل onClick برای کارت‌های کلیک‌شدنی یا aria-*) را می‌پذیرد.
• Card خودش نقش interactive ندارد؛ اگر فقط بخشی از کارت action دارد، به‌جای interactive کردن کل کارت، از <button> یا <a> واقعی استفاده کن.
• children می‌تواند هر محتوای React باشد و ساختار معنایی مثل heading، تصویر و متن را باید خودت مشخص کنی.

Data Attributes and Customize CSS

ریشه‌ی کامپوننت همیشه data-fara-card دارد:

<Card className="featured-card">
  <h3>پیشنهاد ویژه</h3>
</Card>

[data-fara-card] {
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

[data-fara-card].featured-card {
  border-color: #2563eb;
}

[data-fara-card].featured-card:hover {
  box-shadow: 0 12px 30px rgb(15 23 42 / 15%);
  transform: translateY(-2px);
}

className برای تفاوت‌های موردی و layout مناسب است؛ data-fara-card یک hook پایدار برای قوانین عمومی همه‌ی کارت‌هاست.

Props

Card هیچ prop اختصاصی ندارد؛ استایل پایه را خودش اعمال می‌کند.

Prop	Type	Description
className	string	کلاس CSS اضافی برای سفارشی‌سازی
ref	Ref<HTMLDivElement>	دسترسی مستقیم به المان DOM

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <div> (مثل style, onClick, aria-* و ...) نیز پشتیبانی می‌شوند.