Semantic-UI Step Types
Last Updated :
11 Mar, 2022
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic-UI Step offers us a single type of step that is a step. In this article, we will know about the steps.
Semantic-UI Step Types:
- Step: This is used to create step, by using multiple step we can create steps for that we need to add steps in the parent element.
Syntax:
<div class="ui steps">
<div class="step">
...
</div>
</div>
Below examples illustrate the Semantic-UI Step Types:
Example 1: In this article we will create single step.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Step Ordered Group</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>
Semantic-UI Step Types
</strong>
<br><br>
</center>
<div class="ui steps">
<div class="step">
<i class="box icon"></i>
<div class="content">
<div class="title">Delivered</div>
<div class="description">
Hope you like your Purchase
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Step Types
Example 2: In this example, we will create steps by using multiple steps.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Step Ordered Group</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>
Semantic-UI Step Types
</strong>
<br><br>
</center>
<div class="ui steps">
<div class="step">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">
Select your Address
</div>
</div>
</div>
<div class="step">
<i class="file alternate icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">
Select your way to pay
</div>
</div>
</div>
<div class="step completed">
<div class="content">
<div class="title">Delivered</div>
<div class="description">
Check you package
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Step Types
Reference: https://semantic-ui.com/elements/step.html#step
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...