Spectre CSS

Timelines ​

The Timelines are ordered sequences of activities.

March 2016

Initial commit

February 2017

New Documents experience

Bars: represent the progress of a task

Steps: progress indicators of a sequence of task steps

Tiles: repeatable or embeddable information blocks

March 2017

Icons: single-element, responsive and pure CSS icons

Popovers: small overlay content containers

Calendars: date or date range picker and events display

Carousels: slideshows for cycling images

The timeline-item id and timeline-icon href work together to make the timeline navigable.

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>