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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Timelines</strong>
<br><br>
</center>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-left">
<a class="timeline-icon"></a>
</div>
<div class="timeline-content">
HTML and CSS Completed
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-left">
<a class="timeline-icon icon-lg"></a>
</div>
<div class="timeline-content">
Learning JavaScript to make it interactive.
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-left">
<a class="timeline-icon"></a>
</div>
<div class="timeline-content">
Learning frameworks and libraries
so development can be fast.
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we will add links to the first and third timeline elements.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Timelines</strong>
<br><br>
</center>
<div class="timeline">
<div class="timeline-item" id="timeline-example-1">
<div class="timeline-right">
<a class="timeline-icon" href=
"https://www.geeksforgeeks.org/">
</a>
</div>
<div class="timeline-content">
Try our our ide
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-item" id="timeline-example-1">
<div class="timeline-right">
<a class="timeline-icon icon-lg"></a>
</div>
<div class="timeline-content">
Learning JavaScript to make it interactive.
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-item" id="timeline-example-1">
<div class="timeline-center">
<a class="timeline-icon"
href=
"https://www.geeksforgeeks.org/css/spectre-css-installation/">
</a>
</div>
<div class="timeline-content">
Learning frameworks and libraries
so development can be fast.
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://picturepan2.github.io/spectre/experimentals/timelines.html