Blaze UI is a free and open-source user interface toolkit that provides a strong foundation to build maintainable and scalable websites. All of its components are developed mobile-first and are fully responsive which works on devices of any screen size.
In this article, we will be seeing Blaze UI Timelines Colors. There are five classes that are used to change the color of the timeline item. Those classes are listed below.
Blaze UI Timelines Colors Classes:
- 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:
<blaze-timeline-item type="info">
...
</blaze-timeline-item>Example 1: This example shows how to use timeline color classes to change the color of the timeline item.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Blaze UI - Timeline Colors</title>
<link rel="stylesheet" href=
<style>
body {
font-family: sans-serif;
}
.wrapper{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="u-centered">
<h3 style="color:green;">GeeksforGeeks</h3>
<p><b>Timeline Colors - Blaze UI</b></p>
</div>
<div class="wrapper u-window-box-super">
<ul class="o-timeline">
<li class="c-timeline-item">
<div class="c-timeline-item__body">Learn Basic Syntax
<p class="c-paragraph u-small">
Syntax are the rules to write a programming language.
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--warning">
<div class="c-timeline-item__body">Learn Loops
<p class="c-paragraph u-small">
Learn about while, do-while, for-loops etc.
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--brand">
<div class="c-timeline-item__body">
Learn Data Structures
<p class="c-paragraph u-small">
Learn Linked List, Tree, Graph etc.
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--info">
<div class="c-timeline-item__body">
Learn Basic Algorithms
</div>
</li>
<li class="c-timeline-item c-timeline-item--error">
<div class="c-timeline-item__body">Build Projects
<p class="c-paragraph u-small">
Projects are very important.
They help you to brush up on your skills
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--success
c-timeline-item--last">
<div class="c-timeline-item__body">
Start looking for a job
<p class="c-paragraph u-small">
Good luck for your bright future.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Example 2: This example shows the use of timeline color classes with the alternate variation of timeline items.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Blaze UI - Timeline Colors</title>
<link rel="stylesheet" href=
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Timeline Colors - Blaze UI</h3>
</div>
<div class="wrapper u-window-box-super">
<ul class="o-timeline o-timeline--alternate">
<li class="c-timeline-item">
<div class="c-timeline-item__body">
Learn Basic Syntax
</div>
</li>
<li class="c-timeline-item
c-timeline-item--brand c-timeline-item--left">
<div class="c-timeline-item__body">
Learn Loops
</div>
</li>
<li class="c-timeline-item c-timeline-item--info">
<div class="c-timeline-item__body">
Learn Data Structures
</div>
</li>
<li class=
"c-timeline-item c-timeline-item--warning
c-timeline-item--left">
<div class="c-timeline-item__body">
Learn Basic Algorithms
</div>
</li>
<li class="c-timeline-item c-timeline-item--success">
<div class="c-timeline-item__body">
Build Projects
</div>
</li>
<li class="c-timeline-item c-timeline-item--error
c-timeline-item--last c-timeline-item--left">
<div class="c-timeline-item__body">
Start looking for a job
</div>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/timelines/