CSS: callout ​

div[class~="instui-callout"] — تنبيه معلوماتي مضمن لتذكير أو ملاحظة قصيرة.

✅ استخدم Callout عندما:

  • تحتاج إلى إبراز معلومات أو تذكيرات هامة مضمنة

  • الرسالة قصيرة نسبيًا (جملة إلى فقرة قصيرة)

  • يجب أن يجذب التنبيه الانتباه دون مقاطعة التدفق الرئيسي 🚫 لا تستخدم Callout عندما:

  • تتطلب الرسالة تفاعلًا أو إجراءات متعددة — استخدم Modal أو Alert Dialog

  • المحتوى هو محور الصفحة الرئيسي — استخدم Card أو تخطيط Hero بدلاً من ذلك

سهولة الوصول ​

  • تأكد من تطبيق دور التنبيه بشكل صحيح (role="alert" أو role="status")
  • استخدم تباين ألوان دلالي يستوفي معايير WCAG AA
  • لا تعتمد على اللون وحده لنقل المعنى

الاستخدام ​

css
@import "@pantoken/plugin-layouts/layouts.css";

فتحات ​

فتحةالوصف
messageمحتوى رسالة التنبيه

الأجزاء ​

جزءالوصف
.instui-contentحاوية لمحتوى النص.
.instui-iconأيقونة اختيارية على يسار المحتوى.

عناصر زائفة ​

عنصر زائفالوصف
::before—

الحالات ​

حالةالوصف
:optional—

الرموز المستهلكة ​

Tokenنوعقيمة
--instui-color-info-background——
--instui-color-info-border——
--instui-color-info-text——
--instui-radius-medium——
--instui-size-small<length>—
--instui-space-medium——
--instui-space-small——

ذات صلة ​