Lineone - Steps Component

Steps

Components
Steps

Basic Steps

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

1

Step 1
2

Step 2
3

Step 3
4

Step 4

                
  <div>
    <ol class="steps">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>

Primary Steps

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

1

Step 1
2

Step 2
3

Step 3
4

Step 4

                
  <div>
    <ol class="steps">
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>

With Line Space

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

1

Step 1
2

Step 2
3

Step 3
4

Step 4

                
  <div>
    <ol class="steps line-space">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>

Steps Size

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

Step 1
Step 2
Step 3
Step 4

1

Step 1
2

Step 2
3

Step 3
4

Step 4

1

Step 1
2

Step 2
3

Step 3
4

Step 4

                
  <div>
    <ol class="steps [--size:1rem] [--line:1px]">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
  <div>
    <ol class="steps">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
  <div>
    <ol class="steps [--size:2.75rem] [--line:.5rem]">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>

Vertical Steps

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

1

Step 1
2

Step 2
3

Step 3
4

Step 4

                
  <div>
    <ol class="steps is-vertical">
      <li
        class="step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li
        class="step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li
        class="step space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step space-x-4 before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>

Vertical With Line Space

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

1

Step 1
2

Step 2
3

Step 3
4

Step 4

                
  <div>
    <ol class="steps is-vertical line-space">
      <li
        class="step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li
        class="step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li
        class="step space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step space-x-4 before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>

Colored Steps

Code

Steps can be used to show a list of steps in a process. Check out code for detail of usage.

Step 1
Step 2
Step 2
Step 2
Step 2

                
  <div>
    <ol class="steps line-space [--size:.75rem] [--line:1px]">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-primary dark:bg-accent"></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-secondary dark:bg-secondary-light"
        >
          <span
            class="inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80 dark:bg-secondary-light"
          ></span>
        </div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-info"></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-error"></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-warning"></div>
        <h3 class="text-xs+ text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
    </ol>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Steps

Basic Steps

Step 1

Step 2

Step 3

Step 4

Primary Steps

Step 1

Step 2

Step 3

Step 4

With Line Space

Step 1

Step 2

Step 3

Step 4

Steps Size

Step 1

Step 2

Step 3

Step 4

Step 1

Step 2

Step 3

Step 4

Step 1

Step 2

Step 3

Step 4

Vertical Steps

Step 1

Step 2

Step 3

Step 4

Vertical With Line Space

Step 1

Step 2

Step 3

Step 4

Colored Steps

Step 1

Step 2

Step 2

Step 2

Step 2