# البطاقة

> سطح بإطار رفيع يجمع محتوى واحدًا: عنوان ووصف وجسم وتذييل. `elevation="hard"` يرفعه بظل حادّ، و`lift` يجعله يرتفع عند التمرير أو التركيز.

الصفحة: https://ritla.app/ar/ui/card

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add card
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/card
```

## الاستخدام

```tsx
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

<Card elevation="hard" lift render={<a href="/statements" />}>
  <CardHeader>
    <CardTitle>Statements</CardTitle>
  </CardHeader>
  <CardDescription>Download a month as a PDF.</CardDescription>
</Card>
```

## مرجع الخصائص

### `Card`

أي خاصية أخرى من `div` تمر كما هي.

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `elevation` | `"none" \| "hard"` | `"none"` | خاصية Elevation: `hard` إطار بلون العلامة وظل حادّ 6 بكسل نحو نهاية السطر والأسفل. |
| `surface` | `"page" \| "band"` | `"page"` | ما تقف عليه البطاقة: `band` على الشريط السماوي، فيأتي الظل أغمق بدرجة. |
| `lift` | `boolean` | `false` | خاصية State = Hover: ترتفع 3 بكسل نحو بداية السطر وإلى الأعلى ويكبر ظلها إلى 9 بكسل عند التمرير أو التركيز. للبطاقة حين تكون رابطًا. |
| `render` | `ReactElement` | لا يوجد | عنصر آخر بشكل البطاقة، رابط في الغالب؛ يحتفظ بدلالته. |

### `CardTitle`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `as` | `"h2" \| "h3" \| "h4"` | `"h3"` | مستوى العنوان في مخطط الصفحة. |

## إمكانية الوصول

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: إلى البطاقة حين تكون رابطًا.

ARIA:

- البطاقة نفسها `div` بلا دور؛ عنوانها عنوان حقيقي (`h3` افتراضيًا).
- بطاقة `lift` رابط واحد: اسمه نصّه كله، فاجعل العنوان أوله.
- الحركة عند التمرير لا تعمل حين يطلب القارئ تقليل الحركة؛ الظل يبقى.

## ملاحظات العربية والاتجاه

ينعكس:

- الظل الحادّ يقع أسفل اليسار في العربية، وأسفل اليمين في الإنجليزية.
- عند الارتفاع تتحرك البطاقة نحو بداية السطر: إلى اليمين في العربية.
- العنوان في البداية والإجراء في نهاية الرأس.

لا ينعكس:

- الحركة إلى الأعلى لا تتغير.

الأرقام: الأرقام في محتواك تتبع إعداد الأرقام عبر `formatNumber`.

الخط العربي: العنوان `body-14` بوزن Semibold، والوصف `body-14`.

النص ثنائي الاتجاه: اعزل المبالغ والمعرّفات اللاتينية داخل النص العربي.