الثيم الافتراضي

المكوّنات

البطاقة

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

المقابل في shadcncard

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

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

npx ritla add card

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/card

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

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.
النص ثنائي الاتجاه: اعزل المبالغ والمعرّفات اللاتينية داخل النص العربي.