CSS: callout

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

✅ Используйте Callout, когда:

• Вам нужно выделить важную информацию или напоминания в тексте

• Сообщение относительно краткое (предложение или короткий абзац)

• Уведомление должно привлекать внимание, не прерывая основной поток 🚫 Не используйте Callout, когда:

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

• Содержимое является основным фокусом страницы — вместо этого используйте Card или оформление Hero

Доступность

• Убедитесь, что роль 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