Toolbar-Menü
 
Sie sind hier: Start Komponenten
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Bilder
  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.6 Listen

Listen werden zur Aufzählung von Informationen verwendet. Auf den Seiten der Landesregierung Brandenburg dienen sie beispielsweise auch zur Auflistung von Downloads. Sie sind Standard-HTML-Elemente im Fließtext.

  • Ungeordnete Listen
    Beispiel
    • Gründungsjahr der Mark Brandenburg gilt 1157
    • Hauptstadt ist Potsdam
    • Sprachen:
      • Deutsch
      • Niedersorbisch
      • Niederdeutsch
    • Einwohnerzahl 2.464.526 (Stand 2015)
    • Fläche 29.654,16 km²

    Quelltext
    Quelltext kopieren 
    <ul class="bb-list-ul" >
    <li>Gründungsjahr der Mark Brandenburg gilt 1157</li>
    <li>Hauptstadt ist Potsdam</li>
    <li>Sprachen:
        <ul class="bb-list-ul">
            <li>Deutsch</li>
            <li>Niedersorbisch</li>
            <li>Niederdeutsch</li>
        </ul>
    </li>
    <li>Einwohnerzahl 2.464.526 (Stand 2015)</li>
    <li>Fläche 29.654,16 km&sup2;</li>
</ul>

  • Geordnete Listen
    Beispiel

    Numerische Liste

    1. Angermünde
    2. Bad Liebenwerda
    3. Baruth/Mark
    4. Beelitz
    5. Cottbus
    6. Dahme/Mark
    7. Elsterwerda
    8. Guben
    9. Potsdam

    Alphanumerische Liste

    1. Cottbus
    2. Potsdam
    3. Beelitz
    4. Angermünde
    5. Guben

    Icon-Liste

    • Lenzen (Elbe)
    • Ludwigsfelde
    • Ziesar
    • Müncheberg

    Icon-Liste mit Links


    Quelltext
    Quelltext kopieren 
    <!--Numerische Liste-->
<ol class="bb-list-ol">
    <li>Angermünde</li>
    <li>Bad Liebenwerda</li>
    <li>Baruth/Mark</li>
    <li>Beelitz</li>
    <li>Cottbus</li>
    <li>Dahme/Mark</li>
    <li>Elsterwerda</li>
    <li>Guben</li>
    <li>Potsdam</li>
</ol>

<!--Alphanumerische Liste-->
<ol class="bb-list-ol" style="list-style:upper-roman">
    <li><span>Cottbus</span></li>
    <li><span>Potsdam</span></li>
    <li><span>Beelitz</span></li>
    <li><span>Angermünde</span></li>
    <li><span>Guben</span></li>
</ol>

<!--Icon-Liste-->
<ul class="bb-list-icon">
    <li><i class="fa fa-caret-right"></i> Lenzen (Elbe)</li>
    <li><i class="fa fa-caret-right"></i> Ludwigsfelde</li>
    <li><i class="fa fa-caret-right"></i> Ziesar</li>
    <li><i class="fa fa-caret-right"></i> Müncheberg</li>
</ul>

<!--Icon-Liste mit Links-->
<ul class="bb-list-icon">
    <li><i class="fa fa-download"></i> <a href="#" title="Download">Download</a></li>
    <li><i class="fa fa-file-word-o"></i> <a href="#" title="Download Word-Datei">Download Word-Datei</a></li>
    <li><i class="fa fa-file-pdf-o"></i> <a href="#" title="Download PDF-Datei">Download PDF-Datei</a></li>
    <li><i class="fa fa-file-zip-o"></i> <a href="#" title="Download Zip-Datei">Download Zip-Datei</a></li>
    <li><i class="fa fa-file-photo-o"></i> <a href="#" title="Download Bild">Download Bild</a></li>
    <li><i class="fa fa-file-video-o"></i> <a href="#" title="Download Video">Download Video</a></li>
</ul>

  • Begriffsliste (Glossare)
    Beispiel
    Potsdam
    Potsdam ist eine kreisfreie Stadt und mit gut 160.000 Einwohnern die bevölkerungsreichste Stadt und Hauptstadt des Landes Brandenburg. Sie grenzt südwestlich an Berlin.
    Brandenburg
    Ist ein Land im Nordosten der Bundesrepublik Deutschland.
    01.01.2001
    Event 1 am Innenministerium
    02.02.2002
    Hier handelt es sich um einen ziemlich
    langen Text für eine Terminbeschreibung
    Potsdam
    Potsdam ist eine kreisfreie Stadt und mit gut 160.000 Einwohnern die bevölkerungsreichste Stadt und Hauptstadt des Landes Brandenburg. Sie grenzt südwestlich an Berlin.
    Brandenburg
    Ist ein Land im Nordosten der Bundesrepublik Deutschland.

    Quelltext
    Quelltext kopieren 
    <dl>
    <dt>Potsdam</dt>
    <dd>Potsdam ist eine kreisfreie Stadt und mit gut 160.000 Einwohnern die bevölkerungsreichste Stadt
        und Hauptstadt des Landes Brandenburg. Sie grenzt südwestlich an Berlin.
    </dd>
    <dt>Brandenburg</dt>
    <dd>Ist ein Land im Nordosten der Bundesrepublik Deutschland.</dd>
</dl>
<hr>
<dl class="bb-dl-event">
    <dt>01.01.2001</dt>
    <dd>Event 1 am Innenministerium</dd>
    <dt>02.02.2002</dt>
    <dd>Hier handelt es sich um einen ziemlich <br>langen Text für eine Terminbeschreibung</dd>
</dl>
<hr>
<dl class="bb-dl-table-150">
    <dt>Potsdam</dt>
    <dd>Potsdam ist eine kreisfreie Stadt und mit gut 160.000 Einwohnern die bevölkerungsreichste Stadt
        und Hauptstadt des Landes Brandenburg. Sie grenzt südwestlich an Berlin.
    </dd>
    <dt>Brandenburg</dt>
    <dd>Ist ein Land im Nordosten der Bundesrepublik Deutschland.</dd>
</dl>
Aufbau
  • Listen werden als valide HTML-Listen erstellt.
  • Der Schriftstil folgt dem Standardtext.
  • Die Listenzeile im Hauptmenü und Footer hat Standardhöhe (siehe Kapitel 2.5.1 Standardhöhe). Die Listenhöhe im Inhaltsbereich kann frei gewählt werden.
  • Die Aufzählungszeichen können Icons oder kleine Quadrate sein und werden in Grundfarbe eingefärbt.
Spezifische Anforderungen

Sollten Icons innerhalb der Listenelemente vorkommen, so sind diese an die Schrifthöhe anzupassen. Es dürfen ausschließlich Icons für Fließtexte verwendet werden.

Barrierefreiheit

Keine Beschränkungen

Aktionsverhalten

keine Beschränkungen

Responsive Design

keine Beschränkungen

Seite drucken