Skip to content
Related Articles

Related Articles

Semantic-UI Step Content

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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.

Content is an element in our website which displays informative data to the user. It is essential to have content on our website in order to make things look easy and make them better. This content can be an image, textual data, etc.

Semantic UI Step Content: There are three types of content in the Semantic UI.

  • Description: This displays a description of our steps using the description class.
  • Icon: This displays an icon related to our step using <i> tag with the icon class.
  • Link: This enables the step to become a link using <a> tag.

Syntax:

<div class="ui steps">
 <a class="step">
   <i class="... icon"></i>
   <div class="description">....</div>
 </a>
 ....
</div>

Example 1: In the following program, we will be using the description content.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic-UI Step Content</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"
        href=
   <script src=
   </script>
   <style>
      body
      {
        margin-left:10px;
        margin-right:10px;
      }
   </style>
</head>
<body>
<br>
  <div class="ui green huge header">
    GeeksforGeeks
  </div>
  <div class="ui large header">
    Semantic-UI Step Groups
  </div>
  <div class="ui steps">
     
    <div class="step">
      <div class="title">
        John Cena
      </div>
       <!--Description -->
      <div class="description">
        Professional Wrestler
      </div>
    </div>
 
    <div class="step">
      <div class="title">
        Vivian Richards
      </div>     
      <!--Description-->
      <div class="description">
        Legendary Cricketer
      </div>
    </div>
 
  </div >
</body>
</html>


Output:

Semantic-UI Step Content

Semantic-UI Step Content

Example 2: In the following program, we will be using the icon content.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"
        href=
   <script src=
   </script>
   <style>
      body
      {
        margin-left:10px;
        margin-right:10px;
      }
   </style>
</head>
<body>
<br>
   <div class="ui green huge header">
     GeeksforGeeks
   </div>
   <div class="ui large header">
     Semantic-UI Step Groups
   </div>
 
   <div class="ui steps">
     
        <div class="step">
          <!--Icon -->
          <i class="motorcycle icon"></i>
          <div class="content">
            <div class="title">
              Motorcycle
            </div>   
            <!--Description -->
            <div class="description"
              This is a motorcycle
             </div>     
          </div>
        </div
 
        <div class="step">
          <!-- Icon -->
          <i class="futbol icon"></i>
          <div class="content">
              <div class="title">
                Football
              </div>     
            <!--Description -->
              <div class="description">
                This is the Football game
              </div>
          </div>
        </div>
   </div >
</body>
</html>


Output:

Semantic-UI Step Content

Semantic-UI Step Content

Example 3: In the following program, we will be using the link content.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"
        href=
   <script src=
   </script>
   <style>
      body
      {
        margin-left:10px;
        margin-right:10px;
      }
   </style>
</head>
<body>
<br>
  <div class="ui green huge header">
    GeeksforGeeks
  </div>
  <div class="ui large header">
    Semantic-UI Step Groups
  </div>
 
  <div class="ui steps">
 
    <!--Link Group-->
    <a class="active step">
      <!--Icon Group-->
      <i class="motorcycle icon"></i>
      <div class="content">
        <div class="title">
          Delivery
        </div>
        <!--Description Group-->
        <div class="description">
         Taking Fastest Route
        </div>
      </div>
    </a>
 
    <!--Link Group-->
    <a class="step">
      <div class="content">
        <div class="title">
           Total Amount
        </div>
        <!--Description Group-->
        <div class="description">
          600 RS.
         </div>
      </div>
    </a>
  </div>
</body>
</html>


Output:

Semantic-UI Step Content

Semantic-UI Step Content

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!