Semantic-UI | Step
Last Updated :
20 May, 2020
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A step shows the completion of a series of activities.
Example 1: This example creating a simple step of completion.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Step</h2>
<div class="ui steps">
<div class="step">
Placing Order
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example creating a group of steps.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Steps</h2>
<div class="ui ordered steps">
<div class="completed step">
<div class="content">
<div class="title">Order</div>
<div class="description">
Order the food
</div>
</div>
</div>
<div class="completed step">
<div class="content">
<div class="title">Preparing</div>
<div class="description">
Preparing the food
</div>
</div>
</div>
<div class="step">
<div class="content">
<div class="title">On the way</div>
<div class="description">
Food is on your way
</div>
</div>
</div>
<div class="disabled step">
<div class="content">
<div class="title">Delieverd</div>
<div class="description">
Food Delieverd
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
- Add ‘completed’ class to the steps which recompleted.
- Add ‘active’ class to the step which is on going.
- Add ‘disabled’ class to the step which are after the active step.
Output:
For showing these steps in vertical order replace ‘ordered’ class with ‘vertical’ class.
Example 3: This example creating the Steps with Icon.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Steps</h2>
<div class="ui ordered steps">
<div class="completed step">
<i class="code icon"></i>
<div class="content">
<div class="title">Code</div>
<div class="description">
Write Code.
</div>
</div>
</div>
<div class="completed step">
<i class="terminal icon"></i>
<div class="content">
<div class="title">Compile</div>
<div class="description">
Compile Code.
</div>
</div>
</div>
<div class="step">
<i class="window close icon"></i>
<div class="content">
<div class="title">Fix Error</div>
<div class="description">
If it gives error fix
</div>
</div>
</div>
<div class="disabled step">
<i class="terminal icon"></i>
<div class="content">
<div class="title">Compile Again</div>
<div class="description">
Compile Code.
</div>
</div>
</div>
<div class="disabled step">
<i class="computer icon"></i>
<div class="content">
<div class="title">Output</div>
<div class="description">
See the output
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Note: You can add <a> tag to make it link
Example 4: This example creating the Completed, active, disabled state in steps.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Active Step</h2>
<div class="ui steps">
<div class="active step">
<i class="code icon"></i>
<div class="content">
<div class="title">Coding</div>
<div class="description">
Writing the Code
</div>
</div>
</div>
</div>
<h2>Completed Step</h2>
<div class="ui steps">
<div class="completed step">
<i class="code icon"></i>
<div class="content">
<div class="title">Coding</div>
<div class="description">
Finsished Coding
</div>
</div>
</div>
</div>
<h2>Disabled Step</h2>
<div class="ui steps">
<div class="disabled step">
<i class="code icon"></i>
<div class="content">
<div class="title">Coding</div>
<div class="description">
Pending
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Note:
- You can add stackable class to make group steps stackable.
- You can add ‘UI tiny steps’ class for steps to show them tiny for another size, just replace tiny with small, large, massive.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...