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 Alternating items are used to create the alternate items in the timeline using the below classes.
Blaze UI Timelines Alternating items 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.
- o-timeline–alternate: This class is used to create the timeline with alternate items.
- c-timeline-item–left: This class is used to create the item on the left side.
- c-timeline-item–brand: This class is used to change the color of the timeline item to the brand color.
- c-timeline-item–info: This class is used to change the color of the timeline item to the info color.
- c-timeline-item–warning: This class is used to change the color of the timeline item to the warning color.
- c-timeline-item–success: This class is used to change the color of the timeline item to the success color.
- c-timeline-item–error: This class is used to change the color of the timeline item to the error color.
Syntax:
<ul class="o-timeline o-timeline--alternate">
...
<li class="c-timeline-item c-timeline-item--left">
<div class="c-timeline-item__body">
...
</div>
</li>
...
</ul>Example 1: Below example demonstrates the Blaze UI Timelines Alternating items.
<!DOCTYPE html> <html lang="en">
<head>
<title> Blaze UI Timelines Alternating items </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 Alternating items
</h3>
</div>
<ul class="o-timeline o-timeline--alternate">
<li class="c-timeline-item">
<div class="c-timeline-item__body">
GeeksforGeeks 1
</div>
</li>
<li class="c-timeline-item c-timeline-item--left">
<div class="c-timeline-item__body">
GeeksforGeeks item 2
</div>
</li>
<li class="c-timeline-item c-timeline-item--last">
<div class="c-timeline-item__body">
GeeksforGeeks item 3
</div>
</li>
</ul>
</body>
</html>
|
Output:
Blaze UI Timelines Alternating items
Example 2: Below example demonstrates the Blaze UI Timelines Alternating items.
<!DOCTYPE html> <html lang="en">
<head>
<title> Blaze UI Timelines Alternating items </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 Alternating items
</h3>
</div>
<ul class="o-timeline o-timeline--alternate
o-timeline--loading">
<li class="c-timeline-item
c-timeline-item--warning
c-timeline-item--left">
<div class="c-timeline-item__body">
GeeksforGeeks 1
<p>
A Computer Science portal for geeks.
</p>
</div>
</li>
<li class="c-timeline-item
c-timeline-item--error">
<div class="c-timeline-item__body">
GeeksforGeeks item 2
</div>
</li>
<li class="c-timeline-item
c-timeline-item--success
c-timeline-item--left">
<div class="c-timeline-item__body">
GeeksforGeeks item 3
</div>
</li>
<li class="c-timeline-item
c-timeline-item--info">
<div class="c-timeline-item__body">
GeeksforGeeks item 4
</div>
</li>
<li class="c-timeline-item
c-timeline-item--last
c-timeline-item--left">
<div class="c-timeline-item__body">
GeeksforGeeks item 5
<p class="u-text--quiet">
Portal for geeks.
</p>
</div>
</li>
<li class="c-timeline-item
c-timeline-item--loading">
<div class="c-timeline-item__body">
.....Loading item 6
</div>
</li>
</ul>
</body>
</html>
|
Output:
Blaze UI Timelines Alternating items
Reference: https://www.blazeui.com/components/timelines/