Skip to content

Alerts

Die Warnmeldungen und Hinweismeldungen sind kontextbezogene Feedbackmeldungen für typische Benutzeraktionen.

Störung

Diese Art von Benachrichtigung wird am Seitenanfang eingeblendet und ist dauerhaft, auch beim Scrollen, sichtbar. Kommuniziert wichtige Informationen, wie zum Beispiel Wartungsarbeiten.

<div
  class="alert text-center rounded-0 alert-danger bg--error text-white"
  role="alert"
>
  Achtung! Freitag 28.07.2022 führen wir um 16:30 Uhr Wartungsarbeiten durch.
</div>

Für eine korrekte Darstellung der Störungsmeldung muss das Element direkt im <body> eingefügt werden.

<body>
  <div class="alert" ...>
    ...
  </div>


  <!-- Elemente -->
</body>

Permanent

<div
  class="alert text-center rounded-0 alert-info bg--bright-grey-primary-30"
  role="alert"
>
  Sie betrachten gerade Burgenland-Inhalte.
</div>

Für eine korrekte Darstellung einer permanent Hinweismeldung muss das Element direkt im <body> nach dem <header> eingefügt werden.

<body>
  <header>
    ...
  </header>
  <div class="alert" ...>
    ...
  </div>


  <!-- Elemente -->
</body>

Temporär

Ausgelöst durch Interaktionen (zB. wechseln des Bundeslandes) erscheint ein temporäres Feedback und bleibt für fünf Sekunden sichtbar.

Feedback success

<div class="alert alert-temporary in" role="alert">
  <div class="container">
    <p class="bg--alert-success text-center mb-0 col-12 col-md-10 col-xl-8">
      Sie haben Niederösterreich als bevorzugtes Bundesland gespeichert
    </p>
  </div>
</div>

Feedback warning

<div class="alert alert-temporary in" role="alert">
  <div class="container">
    <p class="bg--alert-warning text-center mb-0 col-12 col-md-10 col-xl-8">
      Warning Notification wurde nicht gespeichert
    </p>
  </div>
</div>

Feedback error

<div class="alert alert-temporary in" role="alert">
  <div class="container">
    <p class="bg--alert-error text-center mb-0 col-12 col-md-10 col-xl-8">
      Error Notification wurde nicht gespeichert
    </p>
  </div>
</div>

Für eine korrekte Darstellung einer temporären Hinweismeldung muss das Element direkt im <body> nach dem <header> eingefügt werden.

<body>
  <header>
    ...
  </header>
  <div class="alert in" ...>
    ...
  </div>


  <!-- Elemente -->
</body>