Spectre Timelines

A timeline is used to display the items in a vertical direction. Spectre Timelines are ordered sequences of activities. A timeline is an important feature to show the timely activity user has done.

Spectre Timelines Classes:

• timeline: This class is used to create the timeline.
• timeline-item: This class is used to add items to your timeline.
• timeline-left: This class set the position of your timeline item.
• timeline-icon: This class is used to add the icon to your timeline.
• timeline-content: This class holds the content of that particular item.

Syntax:

<div class="timeline">
 <div class="timeline-item" >
 <div class="timeline-left">
 <a class="timeline-icon"></a>
 </div>
 <div class="timeline-content">
 <!-- tiles structure -->
 </div>
 </div>
</div>

Example 1: In this example, we will show a simple time tile without mentioning any time date or particular logos.

Output:

Example 2: In this example, we will add links to the first and third timeline elements.

Output:

Reference:https://picturepan2.github.io/spectre/experimentals/timelines.html