<commit_before>---
layout: page
title: Progress list
category: Components
---

Show a user's position in a multi-step workflow.

## Example usage

```html
<div class="progress-list">

    <a href="#" class="progress-list__item progress-list__item--current">
        <span class="progress-list__label">
            <span class="badge badge--round badge--outline">Step 1</span>
            Cut a hole in a box
        </span>
        <span class="progress-list__arrow">&gt;</span>
    </a>

    <a href="#" class="progress-list__item">
        <span class="progress-list__label">
            <span class="badge badge--round badge--outline">Step 2</span>
            Put your junk in that box
        </span>
        <span class="progress-list__arrow">&gt;</span>
    </a>

</div>
```

<p data-height="80" data-theme-id="24005" data-slug-hash="pEEWor" data-default-tab="result" data-user="pulsar" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/pulsar/pen/pEEWor/">docs - form - progress list</a> by Pulsar (<a href="http://codepen.io/pulsar">@pulsar</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script>

## States

There are three states of a progress list item

| State                                      | Class                            |
| ------------------------------------------ | -------------------------------- |
| Complete (user has completed this step)    | `progress-list__item--completed` |
| Current (the currently active step)        | `progress-list__item--current`   |
| Disabled (user cannot yet access this step | `is-disabled`                    |<commit_msg>Fix incorrect class name in progress list documentation<commit_after>---
layout: page
title: Progress list
category: Components
---

Show a user's position in a multi-step workflow.

## Example usage

```html
<div class="progress-list">

    <a href="#" class="progress-list__item progress-list__item--current">
        <span class="progress-list__label">
            <span class="badge badge--round badge--outline">Step 1</span>
            Cut a hole in a box
        </span>
        <span class="progress-list__arrow">&gt;</span>
    </a>

    <a href="#" class="progress-list__item">
        <span class="progress-list__label">
            <span class="badge badge--round badge--outline">Step 2</span>
            Put your junk in that box
        </span>
        <span class="progress-list__arrow">&gt;</span>
    </a>

</div>
```

<p data-height="80" data-theme-id="24005" data-slug-hash="pEEWor" data-default-tab="result" data-user="pulsar" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/pulsar/pen/pEEWor/">docs - form - progress list</a> by Pulsar (<a href="http://codepen.io/pulsar">@pulsar</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script>

## States

There are three states of a progress list item

| State                                      | Class                            |
| ------------------------------------------ | -------------------------------- |
| Complete (user has completed this step)    | `progress-list__item--complete` |
| Current (the currently active step)        | `progress-list__item--current`   |
| Disabled (user cannot yet access this step | `is-disabled`                    |
{'fraction_non_alphanumeric': 0.19582475742428698, 'fraction_numerical': 0.005880623346074684, 'mean_word_length': 2.277456647398844, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6323825', 'n_tokens_mistral': 1031, 'n_tokens_neox': 1000, 'n_words': 249}