Баннер

Использование

<div class="inst-banner" data-tone="warn">
  <div class="inst-banner-body">
    <div class="inst-banner-title">Заголовок</div>
    <div class="inst-banner-text">Подробность одной фразой.</div>
  </div>
  <div class="inst-banner-actions">
    <button class="inst-btn inst-btn--sm" type="button">Действие</button>
  </div>
</div>

Когда использовать

Устройство

Действия прижимаются к дальнему краю и не сжимаются, поэтому длинный текст переносится, а кнопка остаётся целой.

Значок центрируется по первой строке текста: calc((1lh - var(--size-icon)) / 2). Формула сама подстраивается под кегль и плотность, поэтому баннер с одной строкой и баннер с тремя выглядят одинаково выровненными.

Варианты

<div class="inst-banner" data-tone="warn">
  <div class="inst-banner-body">
    <div class="inst-banner-title">Доступ истекает через 3 дня</div>
    <div class="inst-banner-text">После 8 августа запуск прогонов остановится.</div>
  </div>
  <div class="inst-banner-actions">
    <button class="inst-btn inst-btn--sm" type="button">Продлить</button>
  </div>
</div>
<div class="inst-banner" data-tone="error">
  <div class="inst-banner-body">
    <div class="inst-banner-title">Обслуживание хранилища</div>
    <div class="inst-banner-text">Артефакты недоступны до 21:00.</div>
  </div>
</div>
<div class="inst-banner" data-tone="ok">
  <div class="inst-banner-body"><div class="inst-banner-title">Изменения сохранены</div></div>
</div>

Тон — тот же data-tone, что на бейдже и всюду ещё. Он несёт иконку. Значок приходит из общего набора масок — одного на баннер и сноску.

Без data-tone значок не рисуется вовсе (content: none), и баннер остаётся на нейтральной приглушённой поверхности.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="src/kit.js"></script>

Что делает кит

Ничего, и это решение, а не пробел. Кит не рисует крестика: баннер сообщает о состоянии системы, а состояние не исчезает оттого, что его закрыли. Закрытие имеет смысл только там, где приложение знает, что делать с закрытым.

Если закрытие всё-таки нужно

Кнопка — обычная, и её надо добавить самому. Вместе с ней придётся решить, что значит «закрыт»: до перезагрузки, до конца сессии или навсегда.

document.addEventListener('click', (e) => {
  const id = e.target.closest('[data-close]')?.dataset.close;
  if (!id) return;
  document.getElementById(id).hidden = true;
  sessionStorage.setItem('hidden:' + id, '1'); // до конца сессии, а не навсегда
});

hidden, а не удаление узла: баннер вернётся, когда состояние повторится, и воссоздавать разметку заново незачем.

Правила

Доступность

API

Связанное

Сноска Пустое состояние Блок отказа Бейдж Модалка