CSS: callout

div[class~="instui-callout"] — Вбудоване інформаційне попередження для короткого нагадування або нотатки.

✅ Використовуйте Callout коли:

• Потрібно підкреслити важливу інформацію або нагадування в контексті

• Повідомлення відносно коротке (речення або короткий абзац)

• Попередження повинно привертати увагу, не перериваючи основний потік 🚫 Не використовуйте Callout коли:

• Повідомлення потребує взаємодії або виконання кількох дій — використовуйте Modal або Alert Dialog

• Зміст є головним фокусом сторінки — замість цього використовуйте Card або Hero layout

Доступність

• Переконайтеся, що роль alert застосована правильно (role="alert" або role="status")
• Використовуйте семантичну контрастність кольорів, що відповідає стандартам WCAG AA
• Не покладайтеся лише на колір для передачі значення

Використання

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

Пов'язані

• alert