SchnitzelRally

Lists are used to order some elements. They are also useful to group some elements. You are able to represent data in an (un)ordered way. Depending on what you want to show, one or the other is more likely to be used.

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

An unordered list is used to list elements in an unordered way.

<ol>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

An ordered list is used to list elements in an ordered way.

<ul class="card">
    <div class="card__task">
        <div class="task__header">
            <p class="task__name"><strong>Task 1</strong></p>
            <div class="task__links">
                <a href="#" class="link">Edit</a>
                <span class="divider"> | </span>
                <a href="#" class="link">Destroy</a>
            </div>
        </div>
        <p class="task__description">Here is the description of task 1</p>
    </div>

    <div class="card__task">
        <div class="task__header">
            <p class="task__name"><strong>Task 2</strong></p>
            <div class="task__links">
                <a href="#" class="link">Edit</a>
                <span class="divider"> | </span>
                <a href="#" class="link">Destroy</a>
            </div>
        </div>
        <p class="task__description">Here is the description of task 2</p>
    </div>

    <div class="card__task">
        <div class="task__header">
            <p class="task__name"><strong>Task 3</strong></p>
            <div class="task__links">
                <a href="#" class="link">Edit</a>
                <span class="divider"> | </span>
                <a href="#" class="link">Destroy</a>
            </div>
        </div>
        <p class="task__description">Here is the description of task 3</p>
    </div>
</ul>

This complex list is used to group task elements with further information. They are also listed in an unordered way.