p Timelines are ordered sequences of activities.

.docs-demo.columns
  .column.col-9.col-sm-12
    .timeline
      #timeline-example-1.timeline-item
        .timeline-left
          a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016")
        .timeline-content
          .tile
            .tile-content
              p.tile-subtitle March 2016
              p.tile-title Initial commit
      #timeline-example-2.timeline-item
        .timeline-left
          a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017")
            i.icon.icon-check
        .timeline-content
          .tile
            .tile-content
              p.tile-subtitle February 2017
              p.tile-title New Documents experience
              p.tile-title
                a(href="components.html#bars") Bars
                | : represent the progress of a task
              p.tile-title
                a(href="components.html#steps") Steps
                | : progress indicators of a sequence of task steps
              p.tile-title
                a(href="components.html#tiles") Tiles
                | : repeatable or embeddable information blocks
            .tile-action
              button.btn View
      #timeline-example-3.timeline-item
        .timeline-left
          a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017")
            i.icon.icon-check
        .timeline-content
          .tile
            .tile-content
              p.tile-subtitle March 2017
              p.tile-title
                a(href="elements.html#icons") Icons
                | : single-element, responsive and pure CSS icons
              p.tile-title
                a(href="components.html#popovers") Popovers
                | : small overlay content containers
              p.tile-title
                a(href="experimentals.html#calendars") Calendars
                | : date or date range picker and events display
              p.tile-title
                a(href="experimentals.html#carousels") Carousels
                | : slideshows for cycling images
            .tile-action
              button.btn View

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <div class="timeline">
        <div class="timeline-item" id="timeline-example-1">
          <div class="timeline-left">
            <a class="timeline-icon" href="#timeline-example-1"></a>
          </div>
          <div class="timeline-content">
            <!-- tiles structure -->
          </div>
        </div>

        <div class="timeline-item" id="timeline-example-2">
          <div class="timeline-left">
            <a class="timeline-icon icon-lg" href="#timeline-example-2">
              <i class="icon icon-check"></i>
            </a>
          </div>
          <div class="timeline-content">
            <!-- tiles structure -->
          </div>
        </div>
        ...
      </div>