Listen

Normale ungeordnete Listen

  • List item one
    • List item one
      • List item one
      • 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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      • List item three
      • List item four
    • 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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    • 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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    • List item four
  • 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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Ungeordnete Liste mit Stamdard-List-Item

Mit der Klasse default kann man die Listitems zurücksetzen auf das normale HTML-Zeichen.

Beispiel

  • List item one
  • List item two
    • List item two.one
    • List item two.two
    • List item two.three
    • List item two.four
  • List item three

Code

<ul class="default">
...
</ul>

Ungeordnete Liste mit Piraten-Sign

Zur Aktivierung des Piraten-Siegels muss class="sign" bei dem <ul> als Attribut ergänzt werden.

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Das Signet kann auch in der Nebenfarbe und in Grau angezeigt werden.

Nebenfarbe

  • List item one

Code:

<ul class="sign secondcolor">
 	<li>List item one</li>
</ul>

Grau

  • List item one

Code:

<ul class="sign grau">
 	<li>List item one</li>
</ul>

Ungeordnete Liste mit Linie

Zur Aktivierung der LInie muss class="line" bei dem <ul> als Attribut ergänzt werden.

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Aufzählung im Textfluss

Mitunter gibt es den Bedarf im normalen Absatztext eine Aufzählung zu machen, die als normaler Text dargestellt werden soll, aber semantisch eine Liste ist.

Zur Aktivierung muss class="textlist" bei dem <ul> als Attribut ergänzt werden.

Beispiel

Wir Piraten setzen uns ein für:

  • Digitalisierung zum Wohle der Bürger,
  • Schutz von Privatsphäre und Daten,
  • offene Standards für besseren Wettbewerb und höhere Qualität,
  • Informationsfreiheit für einfachere Forschung und mehr Innovationen,
  • flächendeckendes Breitband,
  • uvm.