Toolbar-Menu

Styleguide of the State Government Brandenburg

Hauptmenü

Sie sind hier: Start Komponenten

Theme "darkGreen" 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/darkGreen.css"/>

5. Komponenten

5.1 Accordion
5.2 Pictures
5.3 Formulare
5.4 Icons
5.5 Kalender
5.6 Listen
5.7 Mega-Menü
5.8 Mobile-Menü
5.9 Meldungen
5.10 Slider
5.11 Tabellen
5.12 Tabs (Horizontal)
5.13 Tabs (Vertikal)
5.14 Teaser
5.15 Tonaufnahmen
5.16 Videos
5.17 Externe Inhalte

Platzierung

5.4 Icons

Zur Illustrierung können Icons aus dem Icon-Satz „Font Awesome“ genutzt werden. Es ist darauf zu achten, dass ein dem Thema nahekommendes und allgemeinverständliches Icon gefunden und im Anschluss seitenübergreifend, einheitlich verwendet wird. Interaktive Icons (z.B. Social-Media, Vorlesen usw.) sind in der Themenfarbe auszuführen. Diese müssen entsprechend dem Regelwerk eingefärbt und positioniert werden. Weitere in Grundfarbe vorbereitete Beispiele aus dem „Font Awesome“-Icon-Satz sind:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et E-Mail senden dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.

Quelltext

Quelltext kopieren

<div class="row">
    <div class="large-1 columns">
        <i title="Twitter" class="bb-icon fa fa-twitter fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Facebook" class="bb-icon fa fa-facebook fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Google" class="bb-icon fa fa-google fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Ich habe eine Frage." class="bb-icon fa fa-question fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Ton an/aus" class="bb-icon fa fa-volume-up fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Vorlesen" class="bb-icon fa fa-bullhorn fa-lg"></i>
    </div>
    <div class="large-1 columns end">
        <i title="Download" class="bb-icon fa fa-download fa-lg"></i>
    </div>
</div>
<div class="row">
    <div class="large-1 columns">
        <i title="per E-Mail versenden" class="bb-icon fa fa-envelope fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Gefällt mir!" class="bb-icon fa fa-thumbs-up fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Suchen" class="bb-icon fa fa-search fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Unten" class="bb-icon fa fa-caret-down fa-lg"></i>
    </div>
    <div class="large-1 columns ">
        <i title="Rechts" class="bb-icon fa fa-caret-right fa-lg"></i>
    </div>
    <div class="large-1 columns end">
        <i title="Rechts" class="bb-icon fa fa-angle-double-right fa-lg"></i>
    </div>
</div>
<div class="row">
    <div class="large-1 columns">
        <i title="Twitter" class="bb-icon-text fa fa-twitter fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Facebook" class="bb-icon-text fa fa-facebook fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Google" class="bb-icon-text fa fa-google fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Ich habe eine Frage." class="bb-icon-text fa fa-question fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Ton an/aus" class="bb-icon-text fa fa-volume-up fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Vorlesen" class="bb-icon-text fa fa-bullhorn fa-lg"></i>
    </div>
    <div class="large-1 columns end">
        <i title="Download" class="bb-icon-text fa fa-download fa-lg"></i>
    </div>
</div>
<div class="row">
    <div class="large-1 columns">
        <i title="per E-Mail versenden" class="bb-icon-text fa fa-envelope fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Gefällt mir!" class="bb-icon-text fa fa-thumbs-up fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Suchen" class="bb-icon-text fa fa-search fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Unten" class="bb-icon-text fa fa-caret-down fa-lg"></i>
    </div>
    <div class="large-1 columns">
        <i title="Rechts" class="bb-icon-text fa fa-caret-right fa-lg"></i>
    </div>
    <div class="large-1 columns end">
        <i title="Rechts" class="bb-icon-text fa fa-angle-double-right fa-lg"></i>
    </div>
</div>
<div class="row">
    <div class="small-6 columns">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et <i title="per E-Mail versenden" class="bb-icon-text fa fa-envelope fa-lg"></i>
            E-Mail senden dolore magna aliquyam erat, sed diam voluptua.  At vero eos et accusam et.
        </p>
    </div>
    <div class="small-6 columns">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
        </p>
    </div>
</div>

Aufbau

Die Höhe der Icons als freistehende Elemente entspricht der Standardhöhe x 1,5.
Der Hintergrund wird in Grundfarbe gestaltet.
Als Element im Fließtext (Hintergrund transparent, Elementfarbe in Grundfarbe) ist ein Icon so hoch wie die Gesamthöhe eines Kleinbuchstabens („e“, „o“, “a“...).

Spezifische Anforderungen

Es dürfen ausschließlich Icons aus dem Icon-Satz Font-Awesome verwendet werden.
Bezugsquelle: https://style.brandenburg.de/cdn/fontawesome/4.6.3/css/font-awesome.min.css
Weiterführende Informationen: http://fontawesome.io/

Barrierefreiheit

Alle Icons müssen über einen Alternativtext verfügen.

Aktionsverhalten

keine Beschränkungen

Responsive Design