Spectre Timelines
Last Updated :
18 Aug, 2022
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.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ 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:
Spectre Timelines
Example 2: In this example, we will add links to the first and third timeline elements.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ 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 =
</ 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 =
</ a >
</ div >
< div class = "timeline-content" >
Learning frameworks and libraries
so development can be fast.
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Spectre Timelines
Reference: https://picturepan2.github.io/spectre/experimentals/timelines.html
Share your thoughts in the comments
Please Login to comment...