CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Steps

Steps are used to help users navigate through multi-step processes.

Examples

To display steps, apply the class chi-steps to a unordered list ul and indicate the active link with the class -active in the corresponding li tag.

Base

<ul class="chi-steps">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 1</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 2</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 3</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 4</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 5</a>
      </div>
    </div>
  </li>
</ul>

Horizontal Labels

To display steps with horizontal labels, apply the class -horizontal-label to the steps container and indicate the active link with the class -active and the class -completed in the corresponding div tag.

<ul class="chi-steps -horizontal-label">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 1</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 2</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 3</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 4</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 5</a>
    </div>
  </li>
</ul>

Vertical

To display steps vertically, apply the class -vertical to the steps container.

<ul class="chi-steps -vertical">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 1</a>
        <div class="chi-steps__subitem -completed">
          <i class="chi-icon icon-check -xs" aria-hidden="true"></i>
          <p>Completed item</p>
        </div>
        <div class="chi-steps__subitem -active">
          <i class="chi-icon icon-spinner -xs" aria-hidden="true"></i>
          <p>In progress item</p>
        </div>
        <div class="chi-steps__subitem">
          <p>Pending item</p>
        </div>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 2</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 3</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 4</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 5</a>
      </div>
    </div>
  </li>
</ul>

Order progress

  • Step 1

    Completed item | 17 Feb 2021

  • Step 2

    Completed item | 17 Feb 2021

    Completed item | 17 Feb 2021

    Completed item | 17 Feb 2021

  • Step 3

    Pending item | 17 Feb 2021

  • Step 4

    Pending item | 17 Feb 2021

<ul class="chi-steps -vertical">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title -text--h5 -text--navy -lh--2 -m--0">Step 1</a>
        <div class="chi-steps__subitem -completed">
          <i class="chi-icon icon-check -xs" aria-hidden="true"></i>
          <p>
            Completed item
            <span class="-text--2xs"> | 17 Feb 2021</span>
          </p>
          <button class="chi-button -icon -xs -flat -p--0 -ml--1" id="example__help-button" aria-label="Help" data-target="#example__help-popover">
            <i class="chi-icon icon-circle-info-outline -icon--dark -mr--0" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title -text--h5 -text--navy -lh--2 -m--0">Step 2</a>
        <div class="chi-steps__subitem -completed">
          <i class="chi-icon icon-warning -xs -icon--warning" aria-hidden="true"></i>
          <p>
            Completed item 
            <span class="-text--2xs"> | 17 Feb 2021</span>
          </p>
          <button class="chi-button -icon -xs -flat -p--0 -ml--1" id="example__help-button-1" aria-label="Help" data-target="#example__help-popover-1">
            <i class="chi-icon icon-circle-info-outline -icon--dark -mr--0" aria-hidden="true"></i>
          </button>
        </div>
        <div class="chi-steps__subitem -completed">
          <i class="chi-icon icon-check -xs" aria-hidden="true"></i>
          <p>
            Completed item 
            <span class="-text--2xs"> | 17 Feb 2021</span>
          </p>
          <button class="chi-button -icon -xs -flat -p--0 -ml--1" id="example__help-button-2" aria-label="Help" data-target="#example__help-popover-2">
            <i class="chi-icon icon-circle-info-outline -icon--dark -mr--0" aria-hidden="true"></i>
          </button>
        </div>
        <div class="chi-steps__subitem -completed">
          <i class="chi-steps__marker chi-icon icon-arrow-right -sm -icon--warning" aria-hidden="true"></i>
          <i class="chi-icon icon-warning -xs -icon--warning" aria-hidden="true"></i>
          <p>
            Completed item 
            <span class="-text--2xs"> | 17 Feb 2021</span>
          </p>
          <button class="chi-button -icon -xs -flat -p--0 -ml--1" id="example__help-button-3" aria-label="Help" data-target="#example__help-popover-3">
            <i class="chi-icon icon-circle-info-outline -icon--dark -mr--0" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title -text--h5 -text--navy -lh--2 -m--0">Step 3</a>
        <div class="chi-steps__subitem -d--block -pl--0">
          <div class="-d--flex -justify-content--center -align-items--center -mb--1">
            <div class="chi-steps__subitem-icon">
              <i class="chi-icon icon-warning -xs -icon--warning" aria-hidden="true"></i>
            </div>
            <p>
              Pending item 
              <span class="-text--2xs -text--navy"> | 17 Feb 2021</span>
            </p>
            <button class="chi-button -icon -xs -flat -p--0 -ml--1" id="example__help-button-4" aria-label="Help" data-target="#example__help-popover-4">
              <i class="chi-icon icon-circle-info-outline -icon--dark -mr--0" aria-hidden="true"></i>
            </button>
          </div>
          <div class="chi-steps__actions">
            <button class="chi-button -xs">Schedule</button>
          </div>
        </div>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title -text--h5 -text--navy -lh--2 -m--0">Step 4</a>
        <div class="chi-steps__subitem -d--block -pl--0">
          <div class="-d--flex -justify-content--center -align-items--center -mb--1">
            <div class="chi-steps__subitem-icon"></div>
            <p>
              Pending item 
              <span class="-text--2xs -text--navy"> | 17 Feb 2021</span>
            </p>
            <button class="chi-button -icon -xs -flat -p--0 -ml--1" id="example__help-button-5" aria-label="Help" data-target="#example__help-popover-5">
              <i class="chi-icon icon-circle-info-outline -icon--dark -mr--0" aria-hidden="true"></i>
            </button>
          </div>
          <div class="chi-steps__actions">
            <button class="chi-button -xs">Reschedule</button>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

<section class="chi-popover chi-popover--top" id="example__help-popover" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--top" id="example__help-popover-1" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--top" id="example__help-popover-2" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>     
<section class="chi-popover chi-popover--top" id="example__help-popover-3" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--top" id="example__help-popover-4" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--top" id="example__help-popover-5" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
      <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>

<script>
  chi.popover(document.getElementById('example__help-button'));
  chi.popover(document.getElementById('example__help-button-1'));
  chi.popover(document.getElementById('example__help-button-2'));
  chi.popover(document.getElementById('example__help-button-3'));
  chi.popover(document.getElementById('example__help-button-4'));
  chi.popover(document.getElementById('example__help-button-5'));
</script>

Additional size

Small

Use the -sm modifier class to render small steps.

Horizontal

Base

Horizontal labels

<!-- Base -->
<ul class="chi-steps -sm">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 1</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 2</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 3</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 4</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 5</a>
      </div>
    </div>
  </li>
</ul>
<!-- Horizontal labels -->
<ul class="chi-steps -horizontal-label -sm">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 1</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 2</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 3</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 4</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li clas="chi-steps__item">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 5</a>
    </div>
  </li>
</ul>

Vertical

<ul class="chi-steps -vertical -sm">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 1</a>
        <div class="chi-steps__subitem -completed">
          <i class="chi-icon icon-check -xs" aria-hidden="true"></i>
          <p>Completed item</p>
        </div>
        <div class="chi-steps__subitem -active">
          <i class="chi-icon icon-spinner -xs" aria-hidden="true"></i>
          <p>In progress item</p>
        </div>
        <div class="chi-steps__subitem">
          <p>Pending item</p>
        </div>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 2</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 3</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 4</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 5</a>
      </div>
    </div>
  </li>
</ul>

Responsiveness

Use -labels-{breakpoint}--hide to hide step component labels on specific breakpoints or -labels--hide to hide on all breakpoints. Breakpoints supported are sm, md, lg, and xl. Labels are shown on all breakpoints by default.

-labels-md--hide

-labels-lg--hide

<!-- Visible labels from md breakpoint -->
<ul class="chi-steps -labels-md--hide">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 1</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 2</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 3</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 4</a>
      </div>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon">
      <div class="chi-steps__content">
        <a class="chi-steps__item-title" href="#">Step 5</a>
      </div>
    </div>
  </li>
</ul>
<!-- Visible labels from lg breakpoint -->
<ul class="chi-steps -horizontal-label -labels-lg--hide">
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 1</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -completed">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 2</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item -active">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 3</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 4</a>
    </div>
    <div class="chi-steps__line"></div>
  </li>
  <li class="chi-steps__item">
    <div class="chi-steps__icon"></div>
    <div class="chi-steps__content">
      <a class="chi-steps__item-title" href="#">Step 5</a>
    </div>
  </li>
</ul>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon