Open In App

Semantic-UI Step Stackable Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap in use and has great different elements to use to make your website look more amazing. Semantic-UI Step Variations offer us different variety in steps, Stackable, Fluid, Unstackable, Attached, Evenly Divided, and Size.

In this article, we will know about the Semantic UI Step Variations Stackable Variant. This variant is used to create steps that will make the step stackable. Semantic-UI Step Variations Stackable Variant is used so the step can stack vertically only on smaller screens.

Semantic-UI Step Variations Stackable Variant Class:

  • stackable: This class is used to make the steps stackable, it should be used on the parent.

Syntax:

<div class="ui Device stackable steps">
...
</dib>

Note: You can make steps stackable on different sizes of devices.

The below example illustrates the Semantic-UI Step Variations Stackable Variant:

Example 1: In this example, we will create two steps set one will be stackable on tablet size devices and another one will be a default.

HTML




<!DOCTYPE html>
<html>
  <head>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Stackable Content </strong>
      <br /><br />
    </center>
    <strong>Step Stackable Content on Tablet:</strong>
    <br />
    <div class="ui tablet stackable steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="step">
        <i class="dollar icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="step">
        <i class="file icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
    <br />
    <strong>Step non Stackable Content on Tablet:</strong>
    <br />
    <div class="ui steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="step">
        <i class="dollar icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="step">
        <i class="file icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

Example 2: In this example we will make the icons of the steps colorful.

HTML




<!DOCTYPE html>
<html>
  <head>
    <link href=
      rel="stylesheet"
    />
  </head>
  <body>
    <center>
      <h1 class="ui header green">Geeksforgeeks</h1>
      <strong> Semantic-UI Step Stackable Content </strong>
      <br /><br />
    </center>
    <strong>Step Stackable Content on Tablet:</strong>
    <br />
    <div class="ui tablet stackable steps">
      <div class="step">
        <i class="truck icon green"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="step">
        <i class="dollar icon blue"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="step">
        <i class="file icon yellow"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
    <br />
    <strong>Step non Stackable Content on Tablet:</strong>
    <br />
    <div class="ui steps">
      <div class="step">
        <i class="truck icon green"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
        </div>
      </div>
      <div class="step">
        <i class="dollar icon blue"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
        </div>
      </div>
      <div class="step">
        <i class="file icon yellow"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
          <div class="description">Verify order details</div>
        </div>
      </div>
    </div>
  </body>
</html>


Output:

Semantic-UI Step Variations Stackable Variant

Semantic-UI Step Variations Stackable Variant

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



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