Open In App

Semantic-UI Step Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework for creating outstanding user interfaces with CSS and jQuery. It works in the same way as bootstrap and offers a lot of various parts that you can utilize to make your website appear even better. It adds CSS to the elements using a class.

Semantic-UI step class provides us a single step to display a process. We can create steps with various types of variations according to our requirement. In semantic UI there are different types of step variations such as stackable, unstackable, fluid, attached, evenly divided etc. Sometimes when the screen size differs, we’d like to see different variations. 

Semantic-UI Step Types:

  • step: This is used to construct a single step. we can generate steps by using multiple step, but we must first add steps to the parent element.

Semantic – UI variation classes:

  • stackable: This class is added when we want stackable steps. When screen size decreases, steps stack vertically one below the other.
  • fluid: we use this class when we want the step to take the width of the entire container
  • unstackable: this class is used when we don’t need steps to stack below each other when screen size changes
  • top attached: This class is added when we want steps to be top attached.
  • bottom attached: This class is added when we want steps to be bottom attached.

In this article, let’s look at various step variations.

stackable: Only on smaller displays may a step be stacked vertically. When we try changing the size of the screen, steps get stacked on the other.

Syntax:

<div class="ui stackable steps">
    <div class="step">
        ...
      </div>
</div>

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Step Variations</title>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Variations </strong>
      <br /><br />
    </center>
    <div class="ui tablet stackable steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
      <div class="step">
        <i class="redo icon"></i>
        <div class="content">
          <div class="title">Make changes if asked</div>
          <div class="description">
            If any changes are suggested, correct them
          </div>
        </div>
      </div>
      <div class="step completed">
        <div class="content">
          <div class="title">Published</div>
          <div class="description">
            Your article is published!
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

fluid: A fluid step takes up the entire  width of its container. In the example, we can visualize that.

Syntax:

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

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Step Variations</title>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Variations </strong>
      <br /><br />
    </center>
    <div class="ui fluid vertical steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">Pick and article and write it.</div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
      <div class="step">
        <i class="redo icon"></i>
        <div class="content">
          <div class="title">Make changes if asked</div>
          <div class="description">
            If any changes are suggested, correct them
          </div>
        </div>
      </div>
      <div class="step completed">
        <div class="content">
          <div class="title">Published</div>
          <div class="description">Your article is published!</div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

unstackable: On mobile, a step can prevent itself from stacking. When the screen size is minimized steps do not stack one on the other. 

Syntax:

<div class="ui unstackable steps">
     <div class="step">
           ...
     </div>
</div>

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Step Variations</title>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Variations </strong>
      <br /><br />
    </center>
    <div class="ui unstackable steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">Pick and article and write it.</div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
      <div class="step">
        <i class="redo icon"></i>
        <div class="content">
          <div class="title">Make changes if asked</div>
          <div class="description">
            If any changes are suggested, correct them
          </div>
        </div>
      </div>
      <div class="step completed">
        <div class="content">
          <div class="title">Published</div>
          <div class="description">Your article is published!</div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

Attached: Other items can be attached to steps. We can attach steps to the top or the bottom of the additional content.

Syntax:

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

<div class="ui bottom attached steps">
      <div class="step">
        ...
      </div>
</div>

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Step Variations</title>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Variations </strong>
      <br /><br />
    </center>
    <div class="ui top attached steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">Pick and article and write it.</div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
     
 
<p>This might take a week's time</p>
 
 
    <div class="ui bottom attached steps">
      <div class="step">
        <i class="redo icon"></i>
        <div class="content">
          <div class="title">Make changes if asked</div>
          <div class="description">
            If any changes are suggested, correct them
          </div>
        </div>
      </div>
      <div class="step completed">
        <div class="content">
          <div class="title">Published</div>
          <div class="description">Your article is published!</div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

evenly divided: Steps can be spread uniformly within its parent. When the number of steps is provided in the class, steps are divided evenly.

Syntax:

<div class="ui number_of_steps_to_be_evenly_divided steps">
    <div class="step">
          ...
    </div>
</div>

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Step Variations</title>
    <link
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Variations </strong>
      <br /><br />
    </center>
    <div class="ui four steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
      <div class="step">
        <i class="redo icon"></i>
        <div class="content">
          <div class="title">Make changes if asked</div>
          <div class="description">
            If any changes are suggested, correct them
          </div>
        </div>
      </div>
      <div class="step completed">
        <div class="content">
          <div class="title">Published</div>
          <div class="description">
            Your article is published!
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

size: Steps come in a variety of sizes such as mini, tiny, small, large, big, huge, and massive. They can be clearly visualized by the example given below.

Syntax:

<div class="ui size steps">
    <div class="step">
         ...
    </div>
</div>
// In the place of size in the above syntax we 
// can use mini, tiny, small, large, big, huge
// and massive.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Step Variations</title>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Variations </strong>
      <br /><br />
    </center>
     
<p>Mini:</p>
 
    <div class="ui mini steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
    </br>
     
<p>Tiny:</p>
 
    <div class="ui tiny steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
    </br>
     
<p>Small:</p>
 
    <div class="ui small steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
    </br>
     
<p>Large:</p>
 
    <div class="ui large steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
    </br>
     
<p>Big:</p>
 
    <div class="ui big steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
    </br>
     
<p>Huge:</p>
 
    <div class="ui huge steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
    </br>
     
<p>Massive:</p>
 
    <div class="ui massive steps">
      <div class="step">
        <i class="pencil alternate icon"></i>
        <div class="content">
          <div class="title">Write in gfg</div>
          <div class="description">
            Pick and article and write it.
          </div>
        </div>
      </div>
      <div class="active step">
        <i class="eye icon"></i>
        <div class="content">
          <div class="title">In review</div>
          <div class="description">
            The article is reviewed once submitted
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

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



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads