Skip to content
Related Articles

Related Articles

Blaze UI Timelines Standard

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 May, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI Timelines are used to illustrate the events that occurred according to their terminology or what should be planned to happen. Blaze UI Timelines Standard is used to create the standard timeline using the below timeline classes.

Blaze UI Timelines Standard Classes:

  • o-timeline: This class is used to create the timeline.
  • c-timeline-item: This class is used to create the timeline item.
  • c-timeline-item__body: This class is used to create the timeline body.
  • c-timeline-item–last: This class is used to create the last timeline item.

Syntax:

<ul class="o-timeline">
  <li class="c-timeline-item">
    <div class="c-timeline-item__body">
        ...
    </div>
  </li>
  ...
</ul>

Example 1: Below example demonstrates the Blaze UI Timelines Standard.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Timelines Standard </title>
    <link rel="stylesheet" href=
</head>
  
<body class="u-window-box-large">
    <div class="u-centered ">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3
            Blaze UI Timelines Standard
        </h3>
    </div>
  
    <ul class="o-timeline">
        <li class="c-timeline-item">
            <div class="c-timeline-item__body">
                GeeksforGeeks item 1
            </div>
        </li>
        <li class="c-timeline-item c-timeline-item--last">
            <div class="c-timeline-item__body">
                GeeksforGeeks item 2
            </div>
        </li>
    </ul>
</body>
  
</html>


Output:

Blaze UI Timelines Standard

Example 2: Below example demonstrates the Blaze UI Timelines Standard.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Timelines Standard </title>
    <link rel="stylesheet" href=
</head>
  
<body class="u-window-box-large">
    <div class="u-centered ">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3
            Blaze UI Timelines Standard
        </h3>
    </div>
  
    <ul class="o-timeline">
        <li class="c-timeline-item">
            <div class="c-timeline-item__body">
                GeeksforGeeks 1
                <p>
                    A Computer Science portal for geeks.
                </p>
            </div>
        </li>
  
        <li class="c-timeline-item">
            <div class="c-timeline-item__body">
                GeeksforGeeks item 2
                <p class="u-text--quiet">
                    Portal for geeks.
                </p>
            </div>
        </li>
  
        <li class="c-timeline-item">
            <div class="c-timeline-item__body">
                GeeksforGeeks item 3
            </div>
        </li>
  
        <li class="c-timeline-item c-timeline-item--last">
            <div class="c-timeline-item__body">
                GeeksforGeeks item 4
            </div>
        </li>
    </ul>
</body>
  
</html>


Output:

Blaze UI Timelines Standard

Reference: https://www.blazeui.com/components/timelines/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!