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.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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://ide.w3wiki.net/tryit.php" > </ 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:
Reference: https://picturepan2.github.io/spectre/experimentals/timelines.html