Toolbar-Menu
 
Sie sind hier: Start Komponenten
Theme "darkGreyBlue" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/cdn/bb/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/themes/darkGreyBlue.css"/>
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Pictures
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

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.

Erfolgreich (#DAEACE)
Aktion erfolgreich abgeschlossen.
Information (#FFFAD1)
Bitte beachten Sie diesen Hinweis.
Warnung (#FFEDD1)
Bitte überprüfen Sie Ihre Eingaben.
Fehler 404 (#FACFBB)
Diese Seite wurde nicht gefunden.

  • Quelltext
    Quelltext kopieren 
    <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/js/vendor/jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/app.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.
Spezifische Anforderungen

keine Beschränkungen

Barrierefreiheit

keine Beschränkungen

Aktionsverhalten

keine Beschränkungen

Responsive Design

Die Icons können auf kleinen Geräten ausgeblendet werden.

Seite drucken