Semantic-UI Step Types
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
Please Login to comment...