Semantic-UI Step Attached Variation

Last Updated : 10 Mar, 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.

A step element is used to show the completion or progress status of a specific sequence of tasks to the user.

In this article, we will be seeing the Semantic UI step attached variation i.e how the step element can be attached to other elements.

Semantic-UI Step attached variation classes:

top attached: These classes are used on the steps container which is to be attached to the top of an element.
bottom attached: These classes are used on the steps container which is to be attached to the bottom of an element.

Syntax:

<div class="ui top attached steps">
     ...
     <div class="ui attached segment">
      ...
     </div>
</div>

Example 1: The example below shows how to attach step elements on top of an element using the attached and the top class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI - Step Attached Variation</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    
    <style>
        .ui.container {
            text-align: center;
        }
 
        h3 {
            margin-top: 0px;
        }
 
        .ui.steps{
            margin-top: 30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 class="ui header green">GeeksforGeeks</h1>
            <h3>Semantic-UI - Step Attached Variation</h3>
        </div>
 
        <div class="ui three top attached steps">
            <div class="step">
                <i class="user icon"></i>
                <div class="content">
                    <div class="title">Profile</div>
                    <div class="description">
                      Complete Your Profile
                    </div>
                </div>
            </div>
            <div class="active step">
                <i class="payment icon"></i>
                <div class="content">
                    <div class="title">Billing</div>
                    <div class="description">
                        Enter the Billing Information
                    </div>
                </div>
            </div>
            <div class="disabled step">
                <i class="info icon"></i>
                <div class="content">
                    <div class="title">OTP Verification</div>
                    <div class="description">Verify Yourself</div>
                </div>
            </div>
        </div>
        <div class="ui attached segment">
             
<p>GeeksforGeeks is Awesome.</p>
 
        </div>
    </div>
</body>
</html>

Output:

Example 2: The example below shows how to attach step elements to the bottom of an element using the attached and bottom class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI - Step Attached Variation</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    
    <style>
        .ui.container {
            text-align: center;
        }
 
        h3 {
            margin-top: 0px;
        }
 
        .ui.attached.segment{
            margin-top: 30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 class="ui header green">GeeksforGeeks</h1>
            <h3>Semantic-UI - Step Attached Variation</h3>
        </div>
 
        <div class="ui attached segment">
             
<p>GeeksforGeeks is Awesome.</p>
 
        </div>
        <div class="ui three bottom attached steps">
            <div class="step">
                <i class="user icon"></i>
                <div class="content">
                    <div class="title">Profile</div>
                    <div class="description">
                      Complete Your Profile
                    </div>
                </div>
            </div>
            <div class="active step">
                <i class="payment icon"></i>
                <div class="content">
                    <div class="title">Billing</div>
                    <div class="description">
                      Enter the Billing Information
                    </div>
                </div>
            </div>
            <div class="disabled step">
                <i class="info icon"></i>
                <div class="content">
                    <div class="title">OTP Verification</div>
                    <div class="description">Verify Yourself</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 3: The example below shows how to attach step elements on both sides of an element simultaneously.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI - Step Attached Variation</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
     
    <style>
        .ui.container {
            text-align: center;
        }
 
        h3 {
            margin-top: 0px;
        }
 
        .ui.top.steps {
            margin-top: 30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 style="ui header green">GeeksforGeeks</h1>
            <h3>Semantic-UI - Step Attached Variation</h3>
        </div>
 
        <div class="ui three top attached steps">
            <div class="step">
                <i class="user icon"></i>
                <div class="content">
                    <div class="title">Profile</div>
                    <div class="description">Complete Your Profile</div>
                </div>
            </div>
            <div class="active step">
                <i class="payment icon"></i>
                <div class="content">
                    <div class="title">Billing</div>
                    <div class="description">
                       Enter the Billing Information
                     </div>
                </div>
            </div>
            <div class="disabled step">
                <i class="info icon"></i>
                <div class="content">
                    <div class="title">OTP Verification</div>
                    <div class="description">Verify Yourself</div>
                </div>
            </div>
        </div>
        <div class="ui attached segment">
             
<p>GeeksforGeeks is Awesome.</p>
 
        </div>
        <div class="ui three bottom attached steps">
            <div class="step">
                <i class="user icon"></i>
                <div class="content">
                    <div class="title">Profile</div>
                    <div class="description">Complete Your Profile</div>
                </div>
            </div>
            <div class="active step">
                <i class="payment icon"></i>
                <div class="content">
                    <div class="title">Billing</div>
                    <div class="description">
                       Enter the Billing Information
                    </div>
                </div>
            </div>
            <div class="disabled step">
                <i class="info icon"></i>
                <div class="content">
                    <div class="title">OTP Verification</div>
                    <div class="description">Verify Yourself</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>