Skip to content
Related Articles

Related Articles

Semantic-UI Step Types

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Mar, 2022
View Discussion
Improve Article
Save Article

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

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

Semantic-UI Step Types

Reference: https://semantic-ui.com/elements/step.html#step


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!