CSS: callout ​

div[class~="instui-callout"] — התראה מידע משולבת בשורה לתזכורת קצרה או הערה.

✅ השתמש ב-Callout כאשר:

  • אתה צריך להדגיש מידע חשוב או תזכורות בתוך השורה

  • ההודעה קצרה באופן יחסי (משפט עד פסקה קצרה)

  • ההתראה צריכה למשוך תשומת לב בלי להפריע לזרם העיקרי 🚫 אל תשתמש ב-Callout כאשר:

  • ההודעה דורשת אינטראקציה או מספר פעולות — השתמש ב-Modal או ב-Alert Dialog

  • התוכן הוא מוקד העמוד — השתמש ב-Card או ב-Hero layout במקום

נגישות ​

  • ודא שתפקיד ההתראה מיושם כהלכה (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——

קשור ​