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 OneAdditional information
-
Entry TwoLorem 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 ThreeAdditional information
-
Entry FourAdditional 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:
Headline
-
Entry One
-
Entry Two
-
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
-
Entry OneAdditional information
-
Entry TwoAdditional information
-
Entry ThreeLorem 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:
Headline
<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:
Headline
<div class="content-list"> ... <a class="content-list-item content-list-item-brand"> Menüpunkt 3 </a> ... </div>