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 Uhr

    Philosophy 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 Uhr

    Philosophy 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 Uhr

    Philosophy 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>