CSS: callout ​

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

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

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

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

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

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

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

Accessibility ​

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

Usage ​

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

Slots ​

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

Parts ​

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

Pseudo-elements ​

Pseudo-elementDescription
::before—

States ​

StateDescription
:optional—

Tokens consumed ​

TokenTypeValue
--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——