Timeline

Timeline pattern for displaying chronological events.

Markup

Event 1

Description of event 1

Event 2

Description of event 2

Event 3

Description of event 3

<div class="af-timeline">
  <div class="af-timeline-item">
    <div class="af-timeline-item-title">Event 1</div>
    <div class="af-timeline-item-content">Description of event 1</div>
  </div>
  <div class="af-timeline-item">
    <div class="af-timeline-item-title">Event 2</div>
    <div class="af-timeline-item-content">Description of event 2</div>
  </div>
</div>