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";

شکاف‌ها (Slots) ​

شکافتوضیحات
messageمحتوای پیام هشدار

قسمت‌ها ​

قسمتتوضیحات
.instui-contentظرفی برای محتوای متنی.
.instui-iconآیکون اختیاری در سمت چپ محتوا.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::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——

مرتبط ​