Chi Design System
v6.28.0v6.27.0v6.26.0v6.25.0v6.24.0v6.23.0v6.22.0v6.21.0v6.20.0v6.19.0v6.18.0v6.17.0v6.16.0v6.15.0v6.14.0v6.13.0v6.12.0v6.11.0v6.10.0v6.9.0v6.8.0v6.7.0v6.6.0v6.5.0v6.4.0v6.3.0v6.2.0v6.1.0v6.0.0v5.78.0v5.77.0v5.76.0v5.75.0v5.74.0v5.73.0v5.72.0v5.71.0v5.70.0v5.69.0v5.68.0v5.67.0v5.66.0v5.65.0v5.64.0v5.63.0v5.62.0v5.61.0v5.60.0v5.59.0v5.58.0v5.57.0v5.56.0v5.55.0v5.54.0v5.53.0v5.52.0v5.51.1v5.51.0v5.50.0v5.49.0v5.48.0v5.47.0v5.46.0v5.45.0v5.44.0v5.43.0v5.42.0v5.41.0v5.40.0v5.39.0v5.38.0v5.37.0v5.36.0v5.35.0v5.34.0v5.33.0v5.32.0v5.31.0v5.30.0v5.29.0v5.28.0v5.27.0v5.26.0v5.25.0v5.24.0v5.23.0v5.22.0v5.21.0v5.20.1v5.20.0v5.19.0v5.18.0v5.17.0v5.16.0v5.15.0v5.14.1v5.14.0v5.13.1v5.13.0v5.12.0v5.11.0v5.9.1v5.9.0v5.8.0v5.7.0v5.6.0v5.5.0v5.4.0v5.3.1v5.3.0v5.2.0v5.1.0v5.0.0v4.4.0v4.3.0v4.2.0v4.1.2v4.1.1v4.1.0v4.0.0v3.17.0v3.16.0v3.15.0v3.14.0v3.13.0v3.12.0v3.11.0v3.10.0v3.9.0v3.8.0v3.7.0v3.6.0v3.5.0v3.4.0v3.3.0v3.2.0v3.1.1v3.1.0v3.0.0v2.6.0v2.5.1v2.5.0v2.4.1v2.4.0v2.3.0v2.2.0v2.1.0v2.0.0Email SupportTalk #Chi on Microsoft Teams
CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State
CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Steps

Steps are used to help users navigate through multi-step processes.
  • Examples
  • Properties
  • Accessibility

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#

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
<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.

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
<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.

  • Step 1

    Completed item

    In progress item

    Pending item

  • Step 2
  • Step 3
  • Step 4
  • Step 5
<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>

Additional Size

Small

Use the -sm modifier class to render small steps.

Horizontal#

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5

Base

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5

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#

  • Step 1

    Completed item

    In progress item

    Pending item

  • Step 2
  • Step 3
  • Step 4
  • Step 5
<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.

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5

-labels-md--hide

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5

-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