Определение

Баннер – компонент, который используется для отображения важной информации
или предупреждений на странице.

Функциональность

В отличие от Toast (Всплывающее сообщение), Banner является более заметным
и остается на экране до тех пор, пока пользователь сам его не закроет, не завершит действие, связанное с сообщением или оно остается всегда.

Чаще всего Banner располагается в верхней части страницы, в пределах или
под заголовком, чтобы быть максимально заметным.

Дизайн и Стиль

Размер и Форма

Высота компонента подстраивается под размеры блока

• Минимальная ширина 320px

• Растянутым по размеру блока

Цвет и Контраст

Как и Toast (Всплывающее сообщение), Banner может использовать разные цвета
для обозначения типа сообщения (успешное действие, ошибка, предупреждение).

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Варианты

В зависимости от контекста может применяется в различных ситуациях

• Системные уведомления (например, предупреждение о запланированном техническом обслуживании.),
• Ошибки (например, информация о временной недоступности определенного функционала.),
• Предупреждения или советы (например, баннер с информацией о новой версии приложения или доступной обновленной функции.).

В некоторых случаях может применяться без заголовка, если он не предусмотрен
или основной текст баннера короткий и легко воспринимается.

У баннера есть вариант более контрастного и заметного отображения Solid и отображение с тенью

Анатомия