List with two columns
Mithilfe der Klasse list–tablelist
an einem ul-Tag kann eine Liste im zweispaltigen Layout erstellt werden. Mithilfe der nachfolgenden Layout Klassen lässt sich das Aussehen der Liste anpassen:
.bordered
- Full bordered tablelist
.oddeven
- Add odd/even background colors
.ruler
- Add horizontal rulers between rows
.span--1
~span--11
- Set the width of the first cell in each row (twelfth grid)
cell.nowrap
- Disable text wrapping in cell
Liste Basic
-
Ort:Treptow-Köpenick
-
Beginn:05.01.2022 17:30 Uhr
-
Freie Plätze:mehr als 2
-
Hinweis:Aufnahme in Warteliste möglich
<ul class="list--tablelist ">
<li>
<div class="cell nowrap"><strong>Ort:</strong></div>
<div class="cell">Treptow-Köpenick</div>
</li>
<li>
<div class="cell nowrap"><strong>Beginn:</strong></div>
<div class="cell">05.01.2022 17:30 Uhr</div>
</li>
<li>
<div class="cell nowrap"><strong>Freie Plätze:</strong></div>
<div class="cell">mehr als 2</div>
</li>
<li>
<div class="cell nowrap"><strong>Hinweis:</strong></div>
<div class="cell">Aufnahme in Warteliste möglich</div>
</li>
</ul>
Liste mit Rahmen
.borderd
-
13.03.2014 ab 19:00 Uhr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
-
14.03.2014 ab 8:30 Uhr
15.03.2014 ab 8:30 UhrPhilosophy is considered a science -
13.03.2014
Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul class="list--tablelist bordered span--4">
<li>
<div class="cell"><p>13.03.2014 ab 19:00 Uhr</p></div>
<div class="cell"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p><ul><li>Listenpunkt 1</li><li>Listenpunkt 2</li><li>Listenpunkt 3</li></ul><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p></div>
</li>
<li>
<div class="cell"><p>14.03.2014 ab 8:30 Uhr <br> 15.03.2014 ab 8:30 Uhr</p></div>
<div class="cell">Philosophy is considered a science</div>
</li>
<li>
<div class="cell"><p>13.03.2014</p></div>
<div class="cell"><h4>Überschrift</h4><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
</li>
</ul>
Liste mit OddEven
.oddeven
-
13.03.2014 ab 19:00 Uhr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
-
14.03.2014 ab 8:30 Uhr
15.03.2014 ab 8:30 UhrPhilosophy is considered a science -
13.03.2014
Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul class="list--tablelist oddeven span--3">
<li>
<div class="cell"><p>13.03.2014 ab 19:00 Uhr</p></div>
<div class="cell"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p><ul><li>Listenpunkt 1</li><li>Listenpunkt 2</li><li>Listenpunkt 3</li></ul><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p></div>
</li>
<li>
<div class="cell"><p>14.03.2014 ab 8:30 Uhr <br> 15.03.2014 ab 8:30 Uhr</p></div>
<div class="cell">Philosophy is considered a science</div>
</li>
<li>
<div class="cell"><p>13.03.2014</p></div>
<div class="cell"><h4>Überschrift</h4><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
</li>
</ul>
Liste mit Trennstrichen
.ruler
-
14.03.2014 ab 8:30 Uhr
15.03.2014 ab 8:30 UhrPhilosophy is considered a science -
13.03.2014
Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<ul class="list--tablelist ruler span--4">
<li>
<div class="cell"><p>14.03.2014 ab 8:30 Uhr <br> 15.03.2014 ab 8:30 Uhr</p></div>
<div class="cell">Philosophy is considered a science</div>
</li>
<li>
<div class="cell"><p>13.03.2014</p></div>
<div class="cell"><h4>Überschrift</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
</li>
</ul>