Lists
Listen gibt es in vielen verschiedenen Ausführungen und können mit den meisten Einheiten kombiniert werden. Die Entscheidung welche Listenart die passende ist muss von Fall zu Fall getroffen werden und hängt von Inhalt und Anzahl der Listenelemente ab.
Unordered List
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Aliquam tincidunt mauris eu risus
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Aliquam tincidunt mauris eu risus
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Aliquam tincidunt mauris eu risus
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
- Cras ornare tristique elit
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Aliquam tincidunt mauris eu risus <ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Aliquam tincidunt mauris eu risus <ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Aliquam tincidunt mauris eu risus</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ul>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ul>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ul>
Ordered List
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Aliquam tincidunt mauris eu risus
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Aliquam tincidunt mauris eu risus
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Aliquam tincidunt mauris eu risus
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metus
- Cras ornare tristique elit
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Aliquam tincidunt mauris eu risus
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Aliquam tincidunt mauris eu risus
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Aliquam tincidunt mauris eu risus</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ol>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ol>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ol>
Definition List
- Titel ipsum dolor sit amet
- Description ipsum dolor sit amet, consectetuer adipiscing elit
- Titel ipsum dolor sit amet
- Description ipsum dolor sit amet, consectetuer adipiscing elit
- Titel ipsum dolor sit amet
- Description ipsum dolor sit amet, consectetuer adipiscing elit
<dl>
<dt>Titel ipsum dolor sit amet</dt>
<dd>Description ipsum dolor sit amet, consectetuer adipiscing elit</dd>
<dt>Titel ipsum dolor sit amet</dt>
<dd>Description ipsum dolor sit amet, consectetuer adipiscing elit</dd>
<dt>Titel ipsum dolor sit amet</dt>
<dd>Description ipsum dolor sit amet, consectetuer adipiscing elit</dd>
</dl>
Example with a horizontal definition list dl.list--horizontal and multiple dd's.
- Montag
- 09:30 - 15:00 Uhr
- 15:30 - 17:00 Uhr
- Dienstag
- 09:30 - 15:00 Uhr
- 15:30 - 17:00 Uhr
- Mittwoch
- 10:30 - 16:00 Uhr
- Donnerstag
- 09:30 - 17:30 Uhr
- Freitag und Samstag
- Nur für Firmen, Einrichtungen, Schulklassen ab 10 Personen nach telefonischer Anmeldung
- Kategorien
- Kategorie 1
- Kategorie 2
- Kategorie 3
<dl class="list--horizontal">
<dt>Montag</dt>
<dd>09:30 - 15:00 Uhr</dd>
<dd>15:30 - 17:00 Uhr</dd>
<dt>Dienstag</dt>
<dd>09:30 - 15:00 Uhr</dd>
<dd>15:30 - 17:00 Uhr</dd>
<dt>Mittwoch</dt>
<dd>10:30 - 16:00 Uhr</dd>
<dt>Donnerstag</dt>
<dd>09:30 - 17:30 Uhr</dd>
<dt>Freitag und Samstag</dt>
<dd>Nur für Firmen, Einrichtungen, Schulklassen ab 10 Personen nach telefonischer Anmeldung</dd>
<dt class="horizontal bordered">Kategorien</dt>
<dd>Kategorie 1</dd>
<dd>Kategorie 2</dd>
<dd>Kategorie 3</dd>
</dl>
Unordered list without bullet points
ul.list--clean
- Listenelement ohne Bullet
- Listenelement ohne Bullet
- Listenelement ohne Bullet
<ul class="list--clean">
<li>
Listenelement ohne Bullet
</li>
<li>
Listenelement ohne Bullet
</li>
<li>
Listenelement ohne Bullet
</li>
</ul>
Horizontal liste with border
- Listenelement
- Listenelement
- Listenelement
<ul class="list--horizontal bordered">
<li>
Listenelement
</li>
<li>
Listenelement
</li>
<li>
Listenelement
</li>
</ul>
Icon list
Das Modul Iconlist eignet sich um eine Liste aus Text und Icons darzustellen. Hierbei können die Icons von der Webseite von FontAwesome genutzt werden.
ul.list--iconlist
<ul class="list--iconlist">
<li>
<div class="icon">
<i class="bicon bicon-rocket" aria-hidden="true"></i>
</div>
<div class="text">
Listenelement mit Icon-Font
</div>
</li>
<li>
<div class="icon">
<i class="bicon bicon-rocket" aria-hidden="true"></i>
</div>
<div class="text">
Listenelement mit Icon-Font
</div>
</li>
<li>
<div class="icon">
<i class="bicon bicon-rocket" aria-hidden="true"></i>
</div>
<div class="text">
Listenelement mit Icon-Font
</div>
</li>
</ul>
Block Icons Links
Linklist in a block layout with icons
ul.list--blockiconlinks
<ul class="list--blockiconlinks">
<li data-add-clickable-area="full">
<div class="icon">
<i class="bicon bicon-calendar" aria-hidden="true"></i>
</div>
<div class="text">
<a class="link" href="#" data-mainlink="true">Listenelement mit Blockicon</a>
</div>
</li>
<li data-add-clickable-area="full">
<div class="icon">
<i class="bicon bicon-calendar" aria-hidden="true"></i>
</div>
<div class="text">
<a class="link" href="#" data-mainlink="true">Listenelement mit Blockicon</a>
</div>
</li>
<li data-add-clickable-area="full">
<div class="icon">
<i class="bicon bicon-calendar" aria-hidden="true"></i>
</div>
<div class="text">
<a class="link" href="#" data-mainlink="true">Listenelement mit Blockicon</a>
</div>
</li>
</ul>
List with horizontal rulers
ul.list--ruler
- Listenelement mit Trennlinie
- Listenelement mit Trennlinie
- Listenelement mit Trennlinie
<ul class="list--ruler">
<li>
Listenelement mit Trennlinie
</li>
<li>
Listenelement mit Trennlinie
</li>
<li>
Listenelement mit Trennlinie
</li>
</ul>
Odd/Even list
.list--oddeven
- Listenelement mit odd/even
- Listenelement mit odd/even
- Listenelement mit odd/even
- Listenelement mit odd/even
<ul class="list--oddeven">
<li>
Listenelement mit odd/even
</li>
<li>
Listenelement mit odd/even
</li>
<li>
Listenelement mit odd/even
</li>
<li>
Listenelement mit odd/even
</li>
</ul>
List with advanced functions
ul.list--functionlist
<ul class="list--functionlist">
<li class="listitem">
<div class="listitem__main"><div class="form-check"><input type="checkbox" id="listitem1" class="form-check-input"><label for="listitem1" class="form-check-label">Listenelement</label></div></div>
</li>
<li class="listitem">
<div class="listitem__main"><div class="form-check"><input type="checkbox" id="listitem2" class="form-check-input"><label for="listitem2" class="form-check-label">Listenelement</label></div></div>
<div class="listitem__marginal"><button type="button" class="button button--clean"><i class="bicon bicon-info-circle" aria-hidden="true"></i></button></div>
<div class="listitem__footer"><a href="#">Listitem Footer</a></div>
</li>
<li class="listitem">
<div class="listitem__main"><div class="form-check"><input type="checkbox" id="listitem3" class="form-check-input"><label for="listitem3" class="form-check-label">Listenelement</label></div></div>
<div class="listitem__marginal"><button type="button" class="button button--clean"><i class="bicon bicon-info-circle" aria-hidden="true"></i></button></div>
</li>
<li class="listitem">
<div class="listitem__main"><div class="form-check"><input type="checkbox" id="listitem4" class="form-check-input"><label for="listitem4" class="form-check-label">Listenelement mit sehr viel Text Listenelement mit sehr viel Text Listenelement mit sehr viel Text Listenelement mit sehr viel Text Listenelement mit sehr viel Text Listenelement mit sehr viel Text</label></div></div>
<div class="listitem__marginal"><button type="button" class="button button--clean"><i class="bicon bicon-info-circle" aria-hidden="true"></i></button></div>
<div class="listitem__footer"><a href="#">Listitem Footer</a></div>
</li>
</ul> List with links as a cloud
ul.list--linkcloud
- Philosophy
- considered
- science
- interchangeable
- compare
- ordinary
- example
- biology
- chemistry
- question
- turns
<ul class="list--linkcloud">
<li>
<a href="#">Philosophy</a>
</li>
<li>
<a href="#">considered</a>
</li>
<li>
<a href="#">science</a>
</li>
<li>
<a href="#">interchangeable</a>
</li>
<li>
<a href="#">compare</a>
</li>
<li>
<a href="#">ordinary</a>
</li>
<li>
<a href="#">example</a>
</li>
<li>
<a href="#">biology</a>
</li>
<li>
<a href="#">chemistry</a>
</li>
<li>
<a href="#">question</a>
</li>
<li>
<a href="#">turns</a>
</li>
</ul>
List Splitting
Horizontal ul.list--flexsplit.split--2
- Anton
- Berta
- Cäsar
- Dora
<ul class="list--flexsplit split--2">
<li>
Anton
</li>
<li>
Berta
</li>
<li>
Cäsar
</li>
<li>
Dora
</li>
</ul>
Vertical ul.list--split.split--2
- Anton
- Berta
- Cäsar
- Dora
<ul class="list--split split--2">
<li>
Anton
</li>
<li>
Berta
</li>
<li>
Cäsar
</li>
<li>
Dora
</li>
</ul>