Design system
مكوّنات نظام التصميم
صفحة تحقّق داخلية. كل مكوّن معروض بكل قيم خصائصه المسموحة، ويجب أن يبدو سليماً في الاتجاهين معاً · /ar/dev/components
Wordmark
variant: stacked · inline · arabic
size: sm · md · lg · xl · subtitle
tone: inverse
Button
variant: primary · accent · secondary · ghost · danger
size: sm · md · lg
iconStart · iconEnd · loading · disabled
fullWidth
IconButton
variant: ghost · secondary · primary · size: sm · md · lg · round · active · disabled
variant: inverse — فوق كروم المنطقة المحمية
Forms
FormField · Input — عادي · بأيقونة · بلاحقة · خطأ · معطّل
Select · Textarea
SearchField — sm · md · lg
Checkbox · Radio · Switch
Data
Card — tone: default · sunken · accent · warm · inverse · interactive · selected
بطاقة بيضاء بحدّ شعري
سطح غائر بلا ظلّ
حبري خفيف للمختار
طيني دافئ
داخل المنطقة المحمية
ترتفع عند التحويم
حالة الاختيار
Badge — neutral · info · success · pending · danger · live · solid
Tag — التصنيفات الشرعية · قابل للاختيار والإزالة
StatCard · ProgressBar
Avatar — xs · sm · md · lg · xl · ink · clay · sand
DataTable — صفوف قابلة للنقر
| الطلب | الطالبة | الدورة | المبلغ | الحالة |
|---|---|---|---|---|
| WI-2026-041 | أاأمينة الحارثي | أحكام التجويد | 80,00 € | تم التفعيل |
| WI-2026-042 | مقمريم قاسم | العقيدة الميسّرة | 0,00 € | تم التفعيل |
| WI-2026-043 | هبهدى بن صالح | فقه العبادات | 120,00 € | قيد المراجعة |
| WI-2026-044 | ساسارة الأمين | السيرة النبوية | 95,00 € | ملغي |
DataTable — فارغ · EmptyState
| الطلب | الطالبة | الدورة | المبلغ | الحالة |
|---|---|---|---|---|
| لا توجد طلبات تسجيل | ||||
Navigation
Feedback — تحميل · خطأ · نجاح · نوافذ
Alert — tone: info · success · pending · danger · protected · مع إجراء وإغلاق
Skeleton — حالة التحميل: سطر واحد · عدّة أسطر · كتلة بطاقة
Tooltip — placement: top · bottom · start · end (منطقية تنقلب مع RTL)
Toast — tone: success · info · danger
Dialog — يُغلق بـEscape وبالنقر خارج اللوحة
Learning
CourseCard — kind: recorded · live · blended · مجانية · بتقدّم · مقفلة
LessonRow — media الخمسة · state: todo/done · active · locked · hasQuiz
TeacherCard — layout: stacked · row
مُجازة في رواية حفص عن عاصم، وتدرّس أحكام التلاوة منذ اثني عشر عاماً.
- إجازة في رواية حفص عن عاصم
- ليسانس الدراسات الإسلامية
مُجازة في رواية حفص عن عاصم، وتدرّس أحكام التلاوة منذ اثني عشر عاماً.
LiveSessionCard — قريبة · مقفلة للزائرة · متاحة للمشتركة
EnrollmentStatus — الحالات الخمس · md · sm · بلا أيقونة
QuizQuestion — قبل التسليم · بعد الكشف (صحيحة وخاطئة)
CertificateCard — شهادة صادرة · إجازة علمية · مقفلة
Accordion — عنصر مفتوح ابتداءً
الحالة الفارغة داخل مسار التعلّم
Icon · 61 أيقونة مسجّلة
size: 16 · 20 · 24 · 32 — سُمك الخط 1.75 تحت 20px