Open In App

Semantic-UI Step Active State

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 for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about Step Active State. 

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A step shows the completion status of activity in a series of activities and it can be highlighted as active.

Semantic-UI Step Active State Class:

  • active: The active class is used to mark the step as active.

Syntax:

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

The below example illustrates the Semantic-UI Step Active State:

Example 1: In this example, only one step will be there that will active.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
          rel="stylesheet" />
</head>
<body>
    <center>
      <h1 class="ui header green">GeeksforGeeks</h1>
      <strong> Semantic-UI Step Active State</strong>
      <br>
      <div class="ui steps">
        <div class="active step">
          <i class="payment icon green"></i>
          <div class="content">
            <div class="title ">Payment</div>
            <div class="description">Details</div>
          </div>
        </div>
      </div>
    </center>
</body>
</html>


Output:

Semantic-UI Step Active State

Semantic-UI Step Active State

Example 2: In this example, two-step will be there 1st one will be active.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
          rel="stylesheet" />
</head>
<body>
    <center>
      <h1 class="ui header green">GeeksforGeeks</h1>
      <strong>Semantic-UI Step Active State</strong>
      <br>
      <div class="ui steps">
        <div class="active step">
          <i class="payment icon green"></i>
          <div class="content">
            <div class="title ">
                Payment
            </div>
            <div class="description">
                Please Pay the bills
            </div>
          </div>
         </div>
         <div class="step">
           <i class="book icon"></i>
           <div class="content">
             <div class="title">
                 Books
             </div>
             <div class="description">
                 Child of the Prophecy
             </div>
           </div>
         </div>
       </div>
    </center>
</body>
</html>


Output:

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



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