<!-- // // // 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>