تصنيف
عنوان الكارد رقم 1
هذا نص تجريبي للمقتطف يوضح كيف يظهر النص داخل الكارد.
فبراير 2026
اقرأ المزيد ←
🧪 معمل الأنماط
كل العناصر نظيفة — بدون طبقات إضافية
🌙 الداكن: atif
📏 الحجم: normal
📐 الزوايا: smooth
🎭 الأسلوب: solid
🃏 الكروت
بدون أي كلاس طبقة — .oic-card فقط
🔘 الأزرار
أزرار نظيفة بكلاساتها الأصلية
📝 حقول الإدخال
input text
input email
textarea
🏷️ الشارات والوسوم
شارة افتراضية
تصنيف
وسم 1
وسم 2
وسم 3
card__tag
📦 الودجت
كارد كحاوية
محتوى — .oic-card (بدون صورة)
📰 عناوين السكشن
عنوان سكشن (.oic-section__title)
H2 عنوان عادي
H3 عنوان فرعي
H4 عنوان صغير
🎨 سكشن بخلفية (.oic-section-bg)
هذا السكشن عليه كلاس oic-section-bg — يوضح كيف يتأثر بالأسلوب
كارد داخل سكشن
يوضح التباين مع خلفية السكشن
كارد ثاني
نفس الشي — بدون أي طبقة
📄 ألوان النصوص
نص أساسي (--c-text): هذا نص عادي يظهر بلون النص الأساسي.
نص فاتح (--c-text-light): هذا نص ثانوي أخف من الأساسي.
نص باهت (--c-text-muted): هذا نص للميتا والتواريخ.
🎨 الألوان المطبقة
أساسي
--c-primary
ثانوي
--c-secondary
خلفية
--c-bg
خلفية بديلة
--c-bg-alt
سطح
--c-surface
حدود
--c-border
نص
--c-text
نص فاتح
--c-text-light
نص باهت
--c-text-muted
📋 المتغيرات الحالية
📦 ملفات CSS المحمّلة
