Toolbar-Menü

5.9 Meldungen

Meldungen informieren die Besucherinnen und Besucher der Seite nach einer Interaktion über deren aktuellen Zustand. Sie können auch zur Informationswiedergabe sowie Warnung verwendet werden.

Meldungen informieren die Besucherinnen und Besucher der Seite nach einer Interaktion über deren aktuellen Zustand. Sie können auch zur Informationswiedergabe sowie Warnung verwendet werden.

Banner in grüner Farbe mit der Inschrift Erfolg (Farbcode: #DAEACE) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in grüner Farbe mit der Inschrift Erfolg (Farbcode: #DAEACE) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in gelber Farbe mit der Inschrift Information (Farbcode: (#FFFAD1) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in gelber Farbe mit der Inschrift Information (Farbcode: (#FFFAD1) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in helloranger Farbe mit der Inschrift Warnung (Farbcode: (#FFEDD1) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in helloranger Farbe mit der Inschrift Warnung (Farbcode: (#FFEDD1) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in oranger Farbe mit der Inschrift Fehler (Farbcode: (##FACFBB) und darunter zwei Zeilen mit Lorum ipum-Text.
Banner in oranger Farbe mit der Inschrift Fehler (Farbcode: (##FACFBB) und darunter zwei Zeilen mit Lorum ipum-Text.

Quelltext

 
<div data-alert class="alert-box bb-alert success (#DAEACE)">
    <div class="bb-alert-content">
        <div class="bb-alert-title" title="Erfolgreich (#DAEACE)"> Erfolgreich (#DAEACE)</div>
        <div class="bb-alert-description">Aktion erfolgreich abgeschlossen.</div>
    </div>
</div>

<div data-alert class="alert-box bb-alert information (#FFFAD1)">
    <div class="bb-alert-content">
        <div class="bb-alert-title" title="Information (#FFFAD1)"> Information (#FFFAD1)</div>
        <div class="bb-alert-description">Bitte beachten Sie diesen Hinweis.</div>
    </div>
</div>

<div data-alert class="alert-box bb-alert warning (#FFEDD1)">
    <div class="bb-alert-content">
        <div class="bb-alert-title" title="Warnung (#FFEDD1)"> Warnung (#FFEDD1)</div>
        <div class="bb-alert-description">Bitte überprüfen Sie Ihre Eingaben.</div>
    </div>
</div>

<div data-alert class="alert-box bb-alert error (#FACFBB)">
    <div class="bb-alert-content">
        <div class="bb-alert-title" title="Fehlermeldung (#FACFBB)">Fehler 404  (#FACFBB)</div>
        <div class="bb-alert-description">Diese Seite wurde nicht gefunden.</div>
    </div>
</div>

Benötigtes Javascript

 
<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>

Aufbau

  • Jede Meldung zeigt einen Zustand im Sinne eines Erfolgs, Fehlers, einer Information oder Warnung.
  • Der Hintergrund der Meldung ist in dem Farbschema, wie oben dargestellt, zu realisieren. Die Farbcodes sind in der Grafik enthalten.
  • Links und rechts werden einheitliche Symbole zur visuellen Unterstützung der Bedeutung angezeigt.
  • Der Rahmen ist HELLGRAU einzufärben.
  • Jede Meldung zeigt einen Zustand im Sinne eines Erfolgs, Fehlers, einer Information oder Warnung.
  • Der Hintergrund der Meldung ist in dem Farbschema, wie oben dargestellt, zu realisieren. Die Farbcodes sind in der Grafik enthalten.
  • Links und rechts werden einheitliche Symbole zur visuellen Unterstützung der Bedeutung angezeigt.
  • Der Rahmen ist HELLGRAU einzufärben.

Spezifische Anforderungen

Keine Beschränkungen

Keine Beschränkungen

Barrierefreiheit

keine Beschränkungen

keine Beschränkungen

Aktionsverhalten

keine Beschränkungen

keine Beschränkungen

Responsive Design

keine Beschränkungen

keine Beschränkungen

Seite drucken