Semantic-UI Step Ordered Group

Last Updated : 27 Feb, 2022

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.

Semantic UI Step Size Group offer us a different groups like steps, ordered and vertical. In this article, we will know about the Semantic UI Step Ordered group. This is used to create steps that show an ordered sequence of steps.

Semantic-UI Step Ordered Group Class:

ordered: This class is used to make the steps in a order sequence.

Syntax:

<div class="ui ordered steps">
    ...
</div>

The below examples illustrate the Semantic-UI Step Ordered Group:

Example 1: In this example we will use icons and use complete class for the last class so it will won’t show the number for the last step.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Step Ordered Group</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1 class="ui header green">Geeksforgeeks</h1> 
        <strong> 
            Semantic-UI Step Ordered Group 
        </strong> 
        <br><br> 
    </center> 
    <strong>Step Ordered Group:</strong> 
    <div class="ui ordered 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 Ordered Group

Example 2: In this example, we will not use any icons.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Step Ordered Group</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1 class="ui header green">Geeksforgeeks</h1> 
        <strong> 
            Semantic-UI Step Ordered Group 
        </strong> 
        <br><br> 
    </center> 
    <strong>Step Ordered Group:</strong> 
    <div class="ui ordered steps"> 
        <div class="step"> 
            <div class="content"> 
            <div class="title">Shipping</div> 
            <div class="description"> 
                Select your Address 
            </div> 
            </div> 
        </div> 
        <div class="step"> 
            <div class="content"> 
            <div class="title">Billing</div> 
            <div class="description"> 
                Select your way to pay 
            </div> 
            </div> 
        </div> 
        <div class="step"> 
            <div class="content"> 
            <div class="title">Delivered</div> 
            <div class="description"> 
                Check you package 
            </div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>