Timeline

A simple timeline component to display a sequence of events. Use the timeline class on a ul element, with li items containing time and data spans.

10:00 Event description
11:30 Another event description
14:45 Final event description

<ul class="timeline">
    <li>
        <span class="time">10:00</span>
        <span class="data">Event description</span>
    </li>
    <li>
        <span class="time">11:30</span>
        <span class="data">Another event description</span>
    </li>
    <li class="timeline-end">
        <span class="time">14:45</span>
        <span class="data">Final event description</span>
    </li>
</ul>