Content-Listen

Die Content-Liste schließt die Lücke zwischen Textlisten und Tabellen. Sie kommt überall dort zum Einsatz, wo mehr als eine textuelle Aufzählung gefragt ist, aber es sich nicht um tabellarische Inhalte dreht.

Da die Content-Liste eine unsorierte Liste ist, wird die CSS-Klasse .content-list auch auf das <ul>-Tag angewendet. Listen-Elemente <li> erhalten die CSS-Klasse .content-list-item.

Headline

  • Entry
  • Entry
  • Entry
  • Entry One with Example Content Ellipsed Ellipsed
<ul class="content-list">
    <li class="content-list-item">Entry</li>
    ...
    <! -- einzeilige Darstellung -->
    <li class="content-list-item">
        <div class="text-ellipsis">Entry One with Example Content Ellipsed Ellipsed</div>
    </li>
</ul>

Content-Liste mit Beschreibung

Für die Formatierung eines Listeneintrags kommt eine sog. Mikrokomponente zum Einsatz. Die CSS-Klasse .media fungiert dabei als Kontainerklasse für die Mikrokomponente. Die Media-Komponente besteht dabei mindestens aus einem .media-body und einem .media-heading. Beschreibungen werden innerhalb des .media-body mit der CSS-Klasse .media-hint versehen:

Headline

  • Entry One
    Additional information
  • Entry Two
    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
  • Entry Three
    Additional information
  • Entry Four
    Additional information
<ul class="content-list"> 
  ...
  <li class="media">
      <div class="media-body">
          <div class="media-heading">...</div>
          <div class="media-hint">...</div>
      </div>
  </li>
  ...
</div>

Content-Liste mit Bild

Zusätzliche Informationen können links von Listeneinträgen mit der CSS-Klasse .media-left oder rechts von Listeneinträgen mit der CSS-Klasse .media-right eingefügt werden. Für die vertikale Positionierung stehen die CSS-Klassen .media-top, .media-bottom zur Verfügung. Standard ist middle, also zentriert.

Soll ein Listeneintrag mit einem Thumbnail versehen werden so wird ein .img-frame benötigt das das .img-thumbnail enthält. Bei Listen mit Bild aber ohne Beschreibung sieht der Styleguide vor eine kleinere Bild-Variante .img-frame-small zu wählen:

Anmerkung: Innerhalb der CSS-Klasse .img-frame dürfen keine Leerzeichen oder Zeilenumbrüche verwendet werden, da es sonst zu Problemen im Layout führen kann.

Headline

  • Junge mit Hut horizontal
    Entry One
  • Junge mit Hut quadratisch
    Entry Two
  • Junge mit Hut vertikal
    Entry Three
<ul class="content-list"> 
  ...
    <li class="media">
        <div class="media-left media-top">
            <div class="img-frame img-frame-small"><img class="img-thumbnail" ...></div>
        </div>
        <div class="media-body">
            <div class="media-heading">...</div>
        </div>
    </li>
  ...
</div>

Content-Liste mit Bild und Beschreibung

Zuletzt noch die Content-Liste in der "Vollversion" mit Thumbnail und Beschreibung:

Headline

  • Junge mit Hut horizontal
    Entry One
    Additional information
  • Junge mit Hut quadratisch
    Entry Two
    Additional information
  • Junge mit Hut vertikal
    Entry Three
    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 
<ul class="content-list"> 
  ...
    <li class="media">
        <div class="media-left media-top">
            <div class="img-frame"><img class="img-thumbnail" ...></div>
        </div>
        <div class="media-body">
            <div class="media-heading">...</div>
            <div class="media-hint">...</div>
        </div>
    </li>
  ...
</div>

Anwählbare Content-Liste

Eine alternative stellt die anwählbare Content-Liste dar. Sie wird von der Syntax her jedoch anders aufgebaut. Da es sich bei einer wählbaren Liste um eine aneinanderreihung von Links handelt wird diese ebenso dargestellt:

<div class="content-list">
    <a class="content-list-item">...</a>
</div>

in Kombination mit dem Media-Modul:

<div class="content-list">
    <a class="content-list-item media">
        <div class="media-left media-top">
            <div class="img-frame img-frame-small"><img class="img-thumbnail" ...></div>
        </div>
        <div class="media-body">
            <div class="media-heading">Entry One</div>
        </div>
    </a>
    ...
</div>

Funktionale Betonungen

Mit der CSS-Klasse .selected kann ein Eintrag einer Content-Liste vormarkiert werden:

<div class="content-list">
  <a class="content-list-item selected">
    Menüpunkt 1<span class="sr-only">aktiv</span>
  </a>
  ...
</div>

Für Sonderfälle gibt es daneben auch noch die Brand-Variante .content-list-item-brand eines Content-Listen-Eintrags:

Achtung: Die Brand-Variante darf nie in Kombination mit .selected auftreten, da die Schrift scheinbar verschwinden würde. 
<div class="content-list">
  ...
  <a class="content-list-item content-list-item-brand">
    Menüpunkt 3
  </a>
  ...
</div>
Anmerkung Barrierefreiheit: Die eingesetzten Farben haben meist eine Bedeutung. Um diese Bedeutung auch beim Einsatz von Unterstützungstechnologien zu untermauern sollte der Text in den Content-Listen auch entsprechende Aussage haben. Alternativ kann zusätzlicher versteckter Text mit entsprechender Aussage durch die CSS-Klasse .sr-only hinterlegt werden.