بطاقة العرض
عرض أو تنبيه واحد بعنوان وسطر ورابط ورسم؛ واحد على الأكثر في كل شاشة.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add promo-cardويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/promo-cardالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { PromoCard } from "@/components/ui/promo-card";<PromoCard variant="tint" title="Invite a friend" description="You both get JOD 5 when they open an account." action={{ label: "Invite now", href: "/invite" }} />أمثلة
مرجع الخصائص
PromoCard
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "light" | "dark" | "tint" | "light" | خاصية Style. |
title / description | ReactNode | لا يوجد | العرض وسطر واحد. |
action | { label, href } | لا يوجد | الرابط. |
art | ReactNode | لا يوجد | الرسم بحجم 88 في النهاية. |
headingLevel | 2 | 3 | 4 | 2 | مستوى العنوان. |
إمكانية الوصول
ARIA
- عنصر
aside، فيُقرأ محتوى ثانويًا في الصفحة. - الرسم زخرفي.
ملاحظات العربية والاتجاه
ينعكس
- النص يمينًا والرسم يسارًا، وسهم الرابط يشير إلى اليسار.
لا ينعكس
- الرسم الذي تمرّره يتبع قواعده.
- الأرقام
- المبالغ في النص من التطبيق.
- الخط العربي
label-16Semibold للعنوان وbody-12للسطر وlabel-14Medium للرابط.