Semantic-UI Step Vertical 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 offers us a different group like steps, ordered, and vertical. In this article, we will know about the Semantic UI Step Vertical Group. This is used to create steps that can be displayed stacked vertically.

Semantic-UI Step Vertical Group Class:

vertical: This class is used to make the steps vertically displayable.

Syntax:

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

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

Example 1: In this example, we will not use an icon for the steps only the steps will be displayed in vertical form.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Step Vertical 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 Vertical Group 
        </strong> 
        <br><br> 
    <strong>Step Vertical Group:</strong> 
    <br> 
    <div class="ui vertical 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> 
    </center> 
</body> 
</html>

Output:

Semantic-UI Step Vertical Group

Example 2: In this example, we will use the icon for the steps & the steps will be displayed in vertical form.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic-UI Step Vertical 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 Vertical Group 
        </strong> 
        <br><br> 
    <strong>Step Vertical Group:</strong> 
    <br> 
    <div class="ui vertical steps"> 
        <div class="step"> 
            <i class="truck icon green"></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 blue"></i> 
            <div class="content"> 
            <div class="title">Billing</div> 
            <div class="description"> 
                Select your way to pay 
            </div> 
            </div> 
        </div> 
        <div class="step"> 
            <i class="file package icon yellow"></i> 
            <div class="content"> 
            <div class="title">Delivered</div> 
            <div class="description"> 
                Check you package 
            </div> 
            </div> 
        </div> 
    </div> 
    </center> 
</body> 
</html> 