Semantic-UI Step Description Content

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 Content offers us different contents like descriptions, links, and icons. In this article, we will know about the Semantic UI Step description content. This is used to create steps that will be described the steps.

Semantic-UI Step Description Content Class:

description: This class is used to make a step that can contain a description.

Syntax:

<div class="step">
...
    <div class="description">
      ...
    </div>
</div>

Below example illustrate the Semantic-UI Step Description Content:

Example 1: In this example, we will create steps that will not contain any order or any icons. Just simple steps with the description.

HTML

<!DOCTYPE html> 
<html> 
<head> 
   <title>Semantic-UI Step Description Content</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 Description Content 
      </strong> 
      <br><br> 
      <strong>Step Description Content:</strong> 
      <br> 
      <div class="ui 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 Description Content

Example 2: In this example, we will create steps with the icon, and the steps description will be there as well.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <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 Description Content 
      </strong> 
      <br><br> 
      <strong>Step Description Content:</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"> 
              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>