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
Share your thoughts in the comments
Please Login to comment...