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.
Lists come in many different versions and can be combined with most units. The list type should be chosen according to the content and number of list elements in each individual case.
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 metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus
- Cras ornare tristique elit
HTML
<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 metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ul>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ul>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc 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 metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus
- Cras ornare tristique elit
- Vestibulum auctor dapibus neque
- Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus
- Cras ornare tristique elit
HTML
<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 metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ol>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metus</li>
<li>Cras ornare tristique elit</li>
</ol>
</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Nunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc dignissim risus id metusNunc 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
HTML
<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
HTML
<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
HTML
<ul class="list--clean">
<li>
Listenelement ohne Bullet
</li>
<li>
Listenelement ohne Bullet
</li>
<li>
Listenelement ohne Bullet
</li>
</ul>
Horizontal list with border
- Listenelement
- Listenelement
- Listenelement
HTML
<ul class="list--horizontal bordered">
<li>
Listenelement
</li>
<li>
Listenelement
</li>
<li>
Listenelement
</li>
</ul>
Horizontal list stretched and boxed
-
Stark
Listenelement -
Stark
Listenelement -
Stark
Listenelement -
Stark
Listenelement
HTML
<ul class="list--horizontal stretched boxed">
<li>
<strong>Stark</strong><br>Listenelement
</li>
<li>
<strong>Stark</strong><br>Listenelement
</li>
<li>
<strong>Stark</strong><br>Listenelement
</li>
<li>
<strong>Stark</strong><br>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.
The Iconlist module can be used for displaying a list made up of text and icons. The icons from the FontAwesome website can be used.
ul.list--iconlist
HTML
<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
HTML
<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
HTML
<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
HTML
<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
HTML
<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
HTML
<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
HTML
<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
HTML
<ul class="list--split split--2">
<li>
Anton
</li>
<li>
Berta
</li>
<li>
Cäsar
</li>
<li>
Dora
</li>
</ul>
Newslist
ul.list--newslist
-
03 Feb
Lorem ipsum dolor sit amet
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. mehr
-
03 Feb
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. mehr
-
04 Feb
Consetetur sadipscing elitr lorem ipsum
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. mehr
HTML
<ul class="list--newslist">
<li data-add-clickable-area="full">
<p class="date">
<span class="day">03</span>
<span class="month">Feb</span>
</p>
<div class="text">
<h3 class="title">Lorem ipsum dolor sit amet</h3>
<p>
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
<a class="more" data-mainlink="true" href="#">mehr</a>
</p>
</div>
</li>
<li data-add-clickable-area="full">
<p class="date">
<span class="day">03</span>
<span class="month">Feb</span>
</p>
<div class="text">
<h3 class="title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
<p>
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
<a class="more" data-mainlink="true" href="#">mehr</a>
</p>
</div>
</li>
<li data-add-clickable-area="full">
<p class="date">
<span class="day">04</span>
<span class="month">Feb</span>
</p>
<div class="text">
<h3 class="title">Consetetur sadipscing elitr lorem ipsum</h3>
<p>
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
<a class="more" data-mainlink="true" href="#">mehr</a>
</p>
</div>
</li>
</ul>Arrowlist
ul.list--arrowlist
-
Optional Philosophy is considered a science but it is difficult to say.
-
Optional Philosophy is considered a science but it is difficult to say,
-
Optional Philosophy is considered a science but it is difficult to say.
HTML
<ul class="list--arrowlist">
<li data-add-clickable-area="full">
<div class="inner">
<div class="meta text--meta">Optional Metadaten Datum Kategorie</div>
<div class="title">
<a data-mainlink="true" href="#">
Titel Lorem ipsum dolor sit amet
</a>
</div>
<div class="text">
Optional Philosophy is considered a science but it is difficult to say.
</div>
</div>
</li>
<li data-add-clickable-area="full">
<div class="inner">
<div class="meta text--meta">Optional Metadaten Datum Kategorie</div>
<div class="title">
<a data-mainlink="true" href="#">
Titel Lorem ipsum dolor sit amet
</a>
</div>
<div class="text">
Optional Philosophy is considered a science but it is difficult to say,
</div>
</div>
</li>
<li data-add-clickable-area="full">
<div class="inner">
<div class="meta text--meta">Optional Metadaten Datum Kategorie</div>
<div class="title">
<a data-mainlink="true" href="#">
Titel Lorem ipsum dolor sit amet
</a>
</div>
<div class="text">
Optional Philosophy is considered a science but it is difficult to say.
</div>
</div>
</li>
</ul>