Skip to content
Airframe

Timeline

Timeline pattern for displaying chronological events.

Markup

Section titled “Markup”
<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>

Live example

Section titled “Live example”
Event 1
Description of event 1
Event 2
Description of event 2
Event 3
Description of event 3