🧪 معمل الأنماط

كل العناصر نظيفة — بدون طبقات إضافية

🌙 الداكن: atif 📏 الحجم: normal 📐 الزوايا: smooth 🎭 الأسلوب: solid
🃏 الكروت
بدون أي كلاس طبقة — .oic-card فقط
تصنيف

عنوان الكارد رقم 1

هذا نص تجريبي للمقتطف يوضح كيف يظهر النص داخل الكارد.

فبراير 2026 اقرأ المزيد ←
تصنيف

عنوان الكارد رقم 2

هذا نص تجريبي للمقتطف يوضح كيف يظهر النص داخل الكارد.

فبراير 2026 اقرأ المزيد ←
تصنيف

عنوان الكارد رقم 3

هذا نص تجريبي للمقتطف يوضح كيف يظهر النص داخل الكارد.

فبراير 2026 اقرأ المزيد ←
🔘 الأزرار
أزرار نظيفة بكلاساتها الأصلية
📝 حقول الإدخال
input text
input email
textarea
🏷️ الشارات والوسوم
شارة افتراضية تصنيف وسم 1 وسم 2 وسم 3 card__tag
📦 الودجت

ودجت افتراضي

محتوى الودجت — .oic-df-widget

ودجت سايدبار

محتوى — .sidebar .widget

كارد كحاوية

محتوى — .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-primary
ثانوي
--c-secondary
خلفية
--c-bg
خلفية بديلة
--c-bg-alt
سطح
--c-surface
حدود
--c-border
نص
--c-text
نص فاتح
--c-text-light
نص باهت
--c-text-muted
📋 المتغيرات الحالية
📦 ملفات CSS المحمّلة

تجريب مشكلة الظهور

اسم / عنوان البلوك

ثبصثبصث

يبصيثصب

يبصس

Heading

سكشن جديد 1

عنوانك هنا