Semantic-UI Step Link Content

Last Updated : 28 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 link content. This is used to create a step that will link steps.

Semantic-UI Step Link Content Class: We can make the steps linkable by putting the step inside of an anchor tag, else we denote that step by adding the class.

link: This class is used to make the step link.

Syntax:

<a class="active step" href="#">
   ...
</a>

Or:

<div class="link active step" href="#">
   ...
</div>

The below example illustrate the Semantic-UI Step Link Content:

Example 1: In this example, we will place the step inside of the anchor tag.

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 Link Content </strong> 
      <br /><br /> 
      <strong>Step Link 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> 
        <a class="active step" href="#"> 
          <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> 
        </a> 
        <div class="step"> 
          <i class="file package icon yellow"></i> 
          <div class="content"> 
            <div class="title">Deliverey</div> 
            <div class="description">Check you package</div> 
          </div> 
        </div> 
      </div> 
    </center> 
  </body> 
</html> 

Output:

Semantic-UI Step Link Content

Example 2: In this example we will use link class.

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 Link Content 
        </strong> 
        <br><br> 
    <strong>Step Link 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="active step link" href="#"> 
            <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">Delivery</div> 
            <div class="description"> 
                Check you package 
            </div> 
            </div> 
        </div> 
    </div> 
    </center> 
</body> 
</html> 