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=
"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">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=
"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">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://ide.geeksforgeeks.org/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=
"https://www.geeksforgeeks.org/spectre-css-installation/">
                </a>
            </div>
            <div class="timeline-content">
                Learning frameworks and libraries 
                  so development can be fast.
            </div>
        </div>
    </div>
</body>
</html>