Camel2.0 — Dokumentacja komponentów UI

2.2 #Components.AlertBanner Alert Banner

Pasek powiadomień z ikoną, treścią, przyciskami CTA i opcjonalnym zamknięciem. Obsługuje warianty typu (kolor tła), rozmiar (sm), layout (simplified, link, popover) oraz stany (animacja show/dismiss, static). JS: src/js/modules/alert-banner.js.

Examples

Default styling

.alert-banner--default

Domyślny (szary: #e6e6e2)

.alert-banner--validation

Walidacja (#f5f5f5)

.alert-banner--error

Błąd (#fcd9e2)

.alert-banner--important

Ważne (#f6e6d8)

.alert-banner--light

Jasny (#fbfbfb)

.alert-banner--sm

Mniejszy rozmiar (padding 16px, tekst 14px)

.alert-banner--simplified

Layout uproszczony (tekst inline, ikona na końcu)

.alert-banner--red

Czerwone CTA (dla wariantu error)

.alert-banner--static

Stale widoczny (bez animacji)

.alert-banner--link

Z linkiem i strzałką po prawej

Markup: alert-banner.html

<!-- Alert Banner: Default (static) -->
<div class="alert-banner alert-banner--default alert-banner--static [modifier class]" style="margin-bottom: 16px;">
  <span class="alert-banner__icon"></span>
  <div class="alert-banner__content">
    <p class="alert-banner__title">Tytuł powiadomienia</p>
    <p class="alert-banner__text">Treść komunikatu z informacją dla użytkownika.</p>
    <div class="alert-banner__actions">
      <button class="alert-banner__btn-primary">Akcja główna</button>
      <button class="alert-banner__btn-secondary">Anuluj</button>
    </div>
  </div>
  <button class="alert-banner__close" aria-label="Zamknij"></button>
</div>

Source: src/scss/components/_alert-banner.scss, line 1