<!--
//
//
// 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`.
<div class="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<ul class="content-list">
<li class="content-list-item">Entry</li>
<li class="content-list-item">Entry</li>
<li class="content-list-item">Entry</li>
<li class="content-list-item">
<div class="text-ellipsis">Entry One with Example Content Ellipsed Ellipsed</div>
</li>
</ul>
</div>
</div>
```html
<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:
<div class="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<ul class="content-list">
<li class="media">
<div class="media-body">
<div class="media-heading">Entry One</div>
<div class="media-hint">Additional information</div>
</div>
</li>
<li class="media">
<div class="media-body">
<div class="media-heading">Entry Two</div>
<div class="media-hint">
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
</div>
</div>
</li>
<li class="media">
<div class="media-body">
<div class="media-heading">Entry Three</div>
<div class="media-hint">Additional information</div>
</div>
</li>
<li class="media">
<div class="media-body">
<div class="media-heading text-ellipsis">Entry Four</div>
<div class="media-hint">Additional information</div>
</div>
</li>
</ul>
</div>
</div>
```html
<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:
<div class="tc-note">
**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.
</div>
<div class="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<ul class="content-list">
<li class="media">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play.jpg" class="img-thumbnail" width="38" height="28" alt="Junge mit Hut horizontal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry One</div>
</div>
</li>
<li class="media">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play_square.jpg" class="img-thumbnail" width="38" height="38" alt="Junge mit Hut quadratisch"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry Two</div>
</div>
</li>
<li class="media">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play_vert.jpg" class="img-thumbnail" width="28" height="38" alt="Junge mit Hut vertikal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry Three</div>
</div>
</li>
</ul>
</div>
</div>
```html
<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:
<div class="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<ul class="content-list">
<li class="media">
<div class="media-left media-top">
<div class="img-frame"><img src="assets/play.jpg" width="48" height="36" class="img-thumbnail" alt="Junge mit Hut horizontal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry One</div>
<div class="media-hint">Additional information</div>
</div>
</li>
<li class="media">
<div class="media-left media-top">
<div class="img-frame"><img src="assets/play_square.jpg" width="48" height="48" class="img-thumbnail" alt="Junge mit Hut quadratisch"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry Two</div>
<div class="media-hint">Additional information</div>
</div>
</li>
<li class="media">
<div class="media-left media-top">
<div class="img-frame"><img src="assets/play_vert.jpg" width="36" height="48" class="img-thumbnail" alt="Junge mit Hut vertikal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry Three</div>
<div class="media-hint">
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
</div>
</div>
</li>
</ul>
</div>
</div>
```html
<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="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<div class="content-list">
<a class="content-list-item" href="javascript: void(0);"><span class="badge badge-dark">1</span>Inbox</a>
<a class="content-list-item" href="javascript: void(0);"><span class="badge">1001</span>Outbox</a>
<a class="content-list-item" href="javascript: void(0);">Drafts</a>
<a class="content-list-item" href="javascript: void(0);">Deleted</a>
</div>
</div>
</div>
```html
<div class="content-list">
<a class="content-list-item">...</a>
</div>
```
in Kombination mit dem Media-Modul:
<div class="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<div class="content-list">
<a class="content-list-item media" href="javascript: void(0);">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play.jpg" class="img-thumbnail" width="38" height="28" alt="Junge mit Hut horizontal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry One</div>
</div>
</a>
<a class="content-list-item media" href="javascript: void(0);">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play_square.jpg" class="img-thumbnail" width="38" height="38" alt="Junge mit Hut quadratisch"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry</div>
</div>
</a>
<a class="content-list-item media" href="javascript: void(0);">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play_vert.jpg" class="img-thumbnail" width="28" height="38" alt="Junge mit Hut vertikal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry</div>
</div>
</a>
<a class="content-list-item media" href="javascript: void(0);">
<div class="media-left media-top">
<div class="img-frame img-frame-small"><img src="assets/play.jpg" class="img-thumbnail" width="38" height="28" alt="Junge mit Hut horizontal"></div>
</div>
<div class="media-body">
<div class="media-heading">Entry</div>
</div>
</a>
</div>
</div>
</div>
```html
<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="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<div class="content-list">
<a class="content-list-item selected" href="javascript: void(0);">
Menüpunkt 1<span class="sr-only">aktiv</span>
</a>
<a class="content-list-item" href="javascript: void(0);">Menüpunkt 2</a>
<a class="content-list-item" href="javascript: void(0);">Menüpunkt 3</a>
<a class="content-list-item" href="javascript: void(0);">Menüpunkt 4</a>
</div>
</div>
</div>
```html
<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:
<div class="tc-note tc-note-warning">
**Achtung:**
Die Brand-Variante darf nie in Kombination mit `.selected` auftreten,
da die Schrift scheinbar verschwinden würde.
</div>
<div class="tc-example">
<div style="width: 270px; margin: 0 auto 20px auto;">
<h2 class="underline">Headline</h2>
<div class="content-list">
<a class="content-list-item" href="javascript: void(0);">Menüpunkt 1</a>
<a class="content-list-item" href="javascript: void(0);">Menüpunkt 2</a>
<a class="content-list-item content-list-item-brand" href="javascript: void(0);">Menüpunkt 3</a>
<a class="content-list-item" href="javascript: void(0);">Menüpunkt 4</a>
</div>
</div>
</div>
```html
<div class="content-list">
...
<a class="content-list-item content-list-item-brand">
Menüpunkt 3
</a>
...
</div>
```
<div class="tc-note">
**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.
</div>